When designing a user interface with rounded corners you will likey run into situtation where you have nested rounded corners. It could be a button in a card or input, or a box inside a modal.

What should the inner radius be? The easy way out is to just use the same radius, but it doesn’t look good and your design will probably feel a bit ‘off’.

The mathematic rule

There is a common rule that is used when nesting corners where you take the outer radius value, subtract any inner padding, and that will give you the radius that should be used for the inner corner.

innerRadius = outerRadius - padding;
Comparing nested corners. Two cards with a radius of 20 and padding of 10. The first card has an inner box with a 20 radius which looks wrong. The second card has an inner box with a 10 radius which looks correct.

But there’s an exception

What happens if the inner radius calculates to be zero or less? Should you use square corners? If your design utilises a lot of rounded corners then the best approach is to create an exception from this rule. Apply a small radius of 2 to 4 pixels in order to take the harshness off the hard corners.

Two cards comparing a nested box with no corner radius and a small 3 pixel radius which looks better.

At very small sizes, the weirdness of not being mathematically correct isn’t perceiveable. The design generally looks better with the corners knocked off slightly.