Radius
Corner radii, derived from one base value.
Derived from one value
Every step is calc() off --radius. Change that one variable and the whole system's corner language shifts with it.
rounded-xs
4px
rounded-sm
6px
rounded-md
8px
rounded-lg
12px
rounded-xl
16px
rounded-2xl
20px
rounded-full
pill
Nesting rule
An inner radius should be the outer radius minus the padding between them. A 16px card with 8px padding wants an 8px inner radius — matching them makes the inner corner look too round.