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