# Nested Border Radius

> Inner radius is outer minus padding.

- Section: Layout
- URL: https://craft.gustavofior.com/nested-border-radius
- Published: 2026-07-14
- Source: https://github.com/gustavo-fior/craft/blob/main/content/layout/nested-border-radius.mdx

Rounded corners look best when one curve follows the other. If a box sits
inside another box, using the same radius on both usually makes the gap wider
near the corner.

This is one of those little things that makes an interface feel off.

> **Interactive demo: Nested Radius.** Open https://craft.gustavofior.com/nested-border-radius to try it.

The fix is a simple relationship:

> **outer radius = inner radius + inset**

The inset is the distance between the two edges. It is often the parent’s
padding. If the parent has a border, include its width too.

In the demo, the inner radius is `16px` and the inset is `12px`. That makes the
outer radius `28px`.

## Start from the outer radius

Design systems usually start with a radius on the outer component. In that
case, reverse the formula:

> **inner radius = outer radius − inset**

> **Interactive demo: Radius Calculator.** Open https://craft.gustavofior.com/nested-border-radius to try it.

The inner radius cannot go below zero. If the inset is larger than the outer
radius, use a square inner corner. In CSS, `max()` can handle that limit for
you.

## Real components

The difference is easier to see in a card or a menu than in an empty diagram.

> **Interactive demo: Nested Radius Examples.** Open https://craft.gustavofior.com/nested-border-radius to try it.

The card has a `16px` outer radius and an `8px` inset, so its media uses `8px`.
The menu has a `12px` outer radius and a `4px` inset, so its highlighted item
uses `8px`.

## When to adjust it

The formula is a strong starting point, not a rule for every shape. Tune the
result by eye when the inset changes around the component, the inner element
does not reach the corner, or the surfaces use different corner shapes.

The fancy name for this is **concentric corners**: nested corners whose curves
share the same center.

## Resources

- [The math behind nesting rounded corners](https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/): Cloud Four’s explanation of the radius formula with practical CSS examples.
- [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius): MDN’s reference for the CSS border-radius property.
- [CSS corner shaping](https://www.w3.org/TR/css-backgrounds-3/#corners): The specification for outer, padding, and content edge radii.