CSS Secrets

3 Shapes

9 Flexible ellipses

Prerequisites

Basic usage of the border-radius property

The problem

You have probably noticed at some point that any square element with a sufficiently large border-radius can turn into a circle, with CSS code akin to the following:

FIGURE 3.1 A circle, generated by fixed dimensions and a border-radius of half that

background: #fb3;width: 200px;height: 200px;border-radius: 100px; /* >= half the side */

You might have also noticed that you could specify any radius larger than 100px and it will still result in a circle. The reason is outlined in the specification:

“When the sum of any two adjacent border radii exceeds the size of the border box, user agents must proportionally reduce the used values of all border radii until none of them overlap.”

— CSS Backgrounds & Borders Level 3 (w3.org/TR/css3-background/#corner-overlap)

However, we often cannot provide a specific width and height on an element, as we want it to adjust to its content, which may not be known ahead of time. Even if we are designing a static website and its exact content is predetermined, we might want to modify it at some point, or it could be displayed in a fallback font with different metrics. In that case, we usually want it to be an ellipse when the width and height are not exactly equal and a circle when they are. However, with our previous code, that is not the case. The resulting ...