How Do Percentage and Pixel/em Values Differently Affect Border-Radius Shapes?

Border-Radius in Percentages and Pixels/ems: Understanding the Shape Differences

In CSS, the border-radius property defines the curvature of an element's edges. While using percentages or pixels/ems for border-radius may seem interchangeable, they yield distinct results in the shape of the curved corners.

Percentage Values

When using percentages, border-radius refers to the corresponding dimension of the element's border-box. For example, border-radius: 50%; specifies radii on the X and Y axes that are 50% of the element's width and height, respectively. This results in an elliptic shape, with the major axis aligned with the longest side of the element.

Pixel or em Values

In contrast, using pixels or other unit values (e.g., em, in) for border-radius defines a single radius value for both the X and Y axes. However, there is an additional rule in effect for these units: if the curves would overlap, the radii are reduced to half the size of the element's smallest side. This ensures that the resulting shape is a pill shape or circular arc, not an ellipse.

Example

Consider a container element with dimensions 230px x 100px:

• border-radius: 50%; (percentage): Radii are 50% of the width and height, resulting in an ellipse with major axis aligned with the 230px side.
• border-radius: 115px/50px; (pixels): Radii are set explicitly, but due to the overlap rule, they are reduced to half the height, resulting in a pill shape.

Conclusion

Understanding the difference between percentage and pixel/em values for border-radius is crucial for achieving the desired shape of curved corners in your designs. Remember that percentages yield elliptical shapes while pixel/em values create pill shapes or circular arcs. By considering the dimensions of your element, you can manipulate the radii to create the most appropriate shape for your UI.

The above is the detailed content of How Do Percentage and Pixel/em Values Differently Affect Border-Radius Shapes?. For more information, please follow other related articles on the PHP Chinese website!