# Nesting Rounded Corners in CSSConsistency 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;