Radius

Fixed radius steps for UI surfaces; ratios scale rounding to an element’s size. Use these tokens, not literal radius values.

var(--clbr-radius-2xs)

Radius 2xs. Minimal rounding for very small elements (default focus rings, small boxes).

var(--clbr-radius-xs)

Radius xs. Small rounding for compact UI elements (menu items, code spans), or for elements where relative size shouldn't be assumed (images).

var(--clbr-radius-sm)

Radius sm. Moderate rounding for medium-scale UI surfaces.

var(--clbr-radius-md)

Radius md. Default rounding for standard UI surfaces (alerts, code blocks). Pick t-shirt sizes when the element's shortest side is unknown — match the size to the component's relative scale.

var(--clbr-radius-lg)

Radius lg. Pronounced rounding for large surfaces (cards, panels).

var(--clbr-radius-ratio-lg)

Large radius ratio. For more pronounced proportional rounding.

var(--clbr-radius-ratio-default)

Default radius ratio. Multiplier for computing radius from a known element dimension (e.g. shortest side × ratio). Prefer ratio-based calculation over t-shirt sizes when the element's shortest side is known.