Why Does `border-radius` Behave Differently with Pixels and Percentages?

Border-Radius Discrepancy

The behavior of border-radius property differs depending on whether pixel or percentage values are used.

Pixel and EM Values

When using pixel or EM values, the border-radius creates a circular arc or pill shape. This is because only one value is specified, so the horizontal and vertical radii are equal. If the specified value exceeds the size of the element, the radii are reduced to half the size of the smallest side.

Percentage Values

In contrast, when percentage values are used, the border-radius creates an oval or ellipse shape. This is because the percentage refers to the corresponding dimension of the border box. For example, border-radius: 50% sets the horizontal radius to 50% of the element's width and the vertical radius to 50% of the element's height.

To achieve a circular shape with percentage values, two values must be specified, representing the horizontal and vertical radii. For example, border-radius: 50%/25% creates a circle with a horizontal radius of 50% of the element's width and a vertical radius of 25% of the element's height.

This difference arises from the W3C specs, which state that percentage values for border-radius refer to the corresponding dimension of the border box.

The above is the detailed content of Why Does `border-radius` Behave Differently with Pixels and Percentages?. For more information, please follow other related articles on the PHP Chinese website!