Nesting Rounded Corners in CSS

Consistency in rounded corners is something I came upon every now and again. It would really bother me until I found this very neat trick to solve it.

Fix rounded corners with math

I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue.

The solution

The solution is to see every border radius in circles. Each radius is a circle. This allows us to calculate each radius with this equation:

outerRadius - gap = innerRadius

If you want the actual CSS, it looks something like this:

--outer-radius: 1em;
--padding: 0.5em;
--inner-radius: calc(var(--outer-radius) - var(--padding));