Anti-pattern · Layout · Medium
Non-Concentric Nested Radius
A non-concentric nested radius is an inner corner radius copied from its container instead of derived from it, so the two curves never share a centre.
The tell
A nested element whose corner curve does not share a centre with its container — the gap widens at the corner.
Why it happens
Models assign the same radius value everywhere because it reads as consistent. Consistency is right; identical values are not — concentricity needs the padding subtracted.
The rule
Inner radius = outer radius − padding. Derive it, never copy it.
- Measure the padding between the container edge and the nested element.
- Subtract that padding from the container radius to get the inner radius.
- Express both as tokens so the relationship survives future changes.
What is a Non-Concentric Nested Radius?
Put a button inside a card and the corners rarely line up: the inner curve is usually a copy of the outer radius, so the two arcs have different centres and the gap between them visibly widens at the corner. The rule is arithmetic — inner radius equals outer radius minus the padding between them. Set it once, as a token, and nested corners sit concentric.
Paste this after your existing prompt to strip the pattern from the result.