Percentages vs. Pixels/Ems for `border-radius`: What's the Difference?

Border-radius Percentages vs. Pixels and Ems

The border-radius property is used to define the rounded corners of an element. It takes two values, representing the horizontal and vertical radii of an elliptical curve. The behavior of border-radius differs depending on whether percentages or pixels/ems are used as units.

Percentages

As per the W3C specifications, when percentages are used for border-radius, they refer to the corresponding dimension of the border box. This means:

• The horizontal radius is 50% of the element's width.
• The vertical radius is 50% of the element's height.

This results in an elliptical shape where both radii are proportional to the size of the element.

Pixels and Ems

On the other hand, using a single non-percentage value (such as pixels or ems) for border-radius will always result in a circle. This is because the same radius is applied to both the horizontal and vertical axes.

In your example with border-radius: 999px, the radii of the circle should theoretically be 999px. However, an additional rule is applied to prevent overlapping curves, effectively reducing the radius to half the size of the smallest side of the element. So, the radius in this case becomes 50px.

Comparison Between Percentage and Non-Percentage Border-Radius

For elements with fixed sizes, as in your example, you can achieve similar results using both percentages and pixels. In your case, border-radius: 50%; is equivalent to border-radius: 115px/50px; (50% of both sides).

The above is the detailed content of Percentages vs. Pixels/Ems for `border-radius`: What's the Difference?. For more information, please follow other related articles on the PHP Chinese website!