Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?-CSS Tutorial-php.cn

Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?

DDD

Release： 2024-12-27 22:37:12

Original

255 people have browsed it

Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?

Border-radius: Pixel or Percentage?

When using CSS to define an element's border radius, you may notice that the resulting shape differs depending on whether you use a pixel or percentage value. In this article, we'll delve into why this occurs and explore the implications for your designs.

Border-radius Property

The border-radius property specifies the curves at the corners of an element. It accepts two values, representing the radii on the X and Y axes of the quarter ellipse defining the corner shape.

Percentage Values

According to the W3C specifications, percentage values for border-radius refer to the width and height of the element's border box.

For example, border-radius: 50%; defines the radii as follows:

X-axis radius: 50% of the container's width

Y-axis radius: 50% of the container's height

This results in an elliptic shape with equal radii on both axes.

Pixel and Other Units

Using any unit other than a percentage (e.g., pixels, em, viewport units) will produce an ellipse with equal radii, effectively creating a circle.

However, if the resulting circle overlaps the element's border, a different rule is applied. The radii are reduced to half the size of the smallest side of the element. This ensures that the curves don't extend beyond the element's bounds.

In your example:

   background: teal;<br>   border-radius: 999px;<br>   width: 230px;<br>   height: 100px;<br>   ...<br>}

<p></div></p>
<p><p>The border-radius: 999px; would produce a circle. However, since the circle overlaps the element's height, the radii are adjusted to 50px, half of the height.</p><br><p>For this element, you can achieve the same result using both pixels and percentages, as 50% of both width and height is equivalent to 115px/50px:</p></p>
<p><div><div class="snippet-code"><br><pre class="brush:php;toolbar:false">  border-radius: 50%;<br>}<br>.pixels {<br>  border-radius: 115px/50px;<br>}<br>/<em> ... </em>/

<div class="pixels">border-radius: 115px/50px;</div>

The above is the detailed content of Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?. For more information, please follow other related articles on the PHP Chinese website!