← Notes

Nested border radius

22 September 20261 min readLayout · CraftDraft

Two rounded corners nested at the same radius look wrong, and most people cannot say why. The inner one is too round.

For concentric corners the outer radius is the inner radius plus the padding: a card at 20px holding an image at 12px with 8px between them. Where the padding grows past about 24px the two layers stop reading as one object and each radius can be chosen on its own.

On this site the note's page in the collection sits at 12px inside a stack card whose corners are 12px, because the page fills the card with no padding; the room's paper lands at 8px inside the reader's gutter, which is wide enough to be independent.

  • outer = inner + padding, when the layers share a visible inset
  • Independent radii past 24px of padding
  • Keep the token where the layers are unrelated; do not force maths onto every pair
The whole story / 0 chapters

Nested border radius

Choose a chapter. Your reading position stays here until you do.