Shape · Learn · Guide

Keep nested corner centres aligned

Reusing the parent's radius on a child is the single most common shape mistake. Two rounded rectangles only look concentric when their corner arcs share a centre point, and that happens when the inner radius is the outer radius minus the inset. Repeat the same value on both and the inner corner visibly bulges into the gap.

Compare

Same inset, two inner radii

Outer style Inset 8px

10px 18 − 8

Concentric — arcs share a centre

18px parent value reused

Bulged — the gap pinches at each corner

The rule

inner radius = outer radius − inset

Clamp at zero so a large inset never produces a negative radius, and reference the token rather than the literal so the relationship survives a profile change.

border-radius: max(0px, calc(var(--md-sys-shape-corner-value-extra-large) - 8px));

Because a corner style is a magnitude and not a semantic, there is no corner.inner token to reach for — the relationship is arithmetic, and it belongs in the component that owns the inset.