What Happens When Border Radii Overlap?

The cleverness of the rounded corners of CSS borders is its flexible application. It can not only set a unified rounded corner radius, but also set different values ​​for different corners. However, when the rounded radii overlap, the browser does some "behind the scenes" processing, which can lead to some unexpected results.

Many developers are familiar with the "999em hack" technique to create "pill-shaped" rectangles. By setting a huge border-radius value (such as 999em or 999vmax), the corners of the rectangle can be perfectly rounded into semicircles. The advantage of this method is that it can achieve the effect without knowing the size of the rectangle.

However, this technique may have abnormal behavior in some cases. For example, when we try to create a "pill-shaped" rounded corner on the right side of a rectangle and set a smaller rounded corner on the left, the rounded corner on the left may disappear or become extremely small.

This is because in order to prevent the overlap of rounded corner radii, the browser will adjust it according to the specification. The complex formulas in the specification are designed to ensure that all rounded radii are scaled down to scale, thus avoiding overlap.

The browser calculates the ratio of the sum of the length of each side of the rectangle to its adjacent rounded corner radius. It then multiplies all the rounded radii by the smallest of these ratios. This way, all rounded radii will be scaled down until it no longer overlaps.

Let's illustrate with an example: if the rectangle is 200px in width, 100px in height, the rounded corner radius on the right is 400px in radius on the left is 40px in radius. The browser calculates the ratio:

<code>顶部：200px / (40px 400px) = 0.455右侧：100px / (400px 400px) = 0.125底部：200px / (40px 400px) = 0.455左侧：100px / (40px 40px) = 1.25</code>

The minimum ratio is 0.125, so all rounded radii will be multiplied by 0.125. The result is that the radius of the rounded corner on the right becomes 50px and the radius of the rounded corner on the left becomes 5px.

This scale-down mechanism ensures that the rounded corner radii does not overlap, but at the same time it can also cause the smaller rounded corner radii to be over-shrinked and even appear to disappear.

The reason why the browser chooses this way is that it can maintain the proportional relationship between the radius of the rounded corners. If the browser adopts other strategies, such as narrowing the maximum rounded radius, it may cause the end result to be more different from the developer's expectations.

In short, understanding the processing mechanism of overlapping rounded corners in CSS borders helps developers better control the rounded corner effects and avoid unexpected results. Thanks to my colleague Catherine for first discovering this issue, and James helped me understand the specification!

The above is the detailed content of What Happens When Border Radii Overlap?. For more information, please follow other related articles on the PHP Chinese website!