Calculating nested border radius

This is a short but very helpful tip for calculating border radius of some elements inside something that already have the border radius (think about a rounded button inside a rounded card).

You can’t just use the same value for the outer and the inner round because the result will not look good.

The formula for calculating the inner radius is:

Inner Radius = Outer Radius - Gap

It can be implemented in CSS like this:

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

Source:

• https://twitter.com/lilykonings/status/1567317037126680576
• https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/