# Nested Radii

**SHOULD** · **ID:** `design-nested-radii` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-nested-radii

> SHOULD: Nested radii: child ≤ parent; concentric

Child radius ≤ parent radius and concentric

When a rounded element contains another rounded element, the inner radius should be the outer radius minus the padding. This keeps the curves concentric and visually aligned. Formula: innerRadius = outerRadius - padding. The formula has a bound, which the Vercel line does not state: better-ui's surfaces guide notes that "This rule is most useful when nested surfaces are close together. If padding is larger than `24px`, treat the layers as separate surfaces and choose each radius independently instead of forcing strict concentric math." Past roughly 24px of padding the eye no longer reads the two curves as one nested form, so the arithmetic starts producing an absurdly large outer radius in service of a relationship nobody perceives.

## Bad — do not do this

`design-nested-radii-bad`

```tsx
export function NestedRadiiBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      {/* Inner radius reuses the outer 24px despite the 12px inset — the curves diverge. */}
      <div className="p-3 bg-destructive/15 rounded-3xl">
        <div className="rounded-3xl bg-card border border-border p-4">
          <p className="text-sm font-medium text-foreground">Divergent corners</p>
          <p className="text-xs text-muted-foreground mt-1">
            The inner curve is too round for its inset — the gap pinches at each corner.
          </p>
        </div>
      </div>
      <p className="text-xs text-error">
        Inner radius copies the outer (24px) while inset 12px — corners are not concentric.
      </p>
    </div>
  );
}
```

## Good — do this

`design-nested-radii-good`

```tsx
export function NestedRadiiGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      {/* outer 24px (rounded-3xl) − 12px padding (p-3) = 12px inner (rounded-xl) */}
      <div className="p-3 bg-primary/15 rounded-3xl">
        <div className="rounded-xl bg-card border border-border p-4">
          <p className="text-sm font-medium text-foreground">Concentric corners</p>
          <p className="text-xs text-muted-foreground mt-1">
            The inner curve runs parallel to the outer one at every point.
          </p>
        </div>
      </div>
      <p className="text-xs text-success">
        inner = outer − padding → 24px − 12px = 12px. Curves stay concentric.
      </p>
    </div>
  );
}
```

## References

- [Nested Border Radius](https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/)
- [jakubkrehel/skills — better-ui: surfaces](https://github.com/jakubkrehel/skills/blob/main/skills/better-ui/surfaces.md)