Nested Radii - Making smooth corners

Designer Aleks, aka @aleksliving on Twitter, shares an awesome design tip for nested border radius:

It is clear from the picture that the second nested border looks a lot smoother than the first one. The trick is simple, make the outer radius the sum of the inner radius + padding.

Not long after Aleks shared this tip designer Jhey (@jh3yy on Twitter) went one step further and created an interactive example using custom properties to work out the nested radius of elements.

The trick uses css variables to automatically calculate the border-radius values:

.parent {
  --nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
  border-radius: var(--nested-radius);
}

Here's an interactive version of Jhey's experiment on Codepen: Inner Radius Design Tip with CSS Custom Properties

If you ever designed nested rounded borders and thought something was off, now you know exactly why and how to fix it!