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));