Border radius

The radius scale from sharp to circle.

Corners use a single token — --border-radius (12.5px) — scaled with calc() to stay on a consistent rhythm.

Scale

Usage guide

Base

Buttons, inputs, most inline controls.

Comfortable

Alerts and floating surfaces — softer without looking rounded.

Soft

Cards and large content wrappers.

Pill

Chiplets, progress and meter bars, toggles.

Circle

Avatars, status dots, circular icon buttons.

border-radius: var(--border-radius);
border-radius: calc(var(--border-radius) * 2);
border-radius: 1000px; /* pill */
border-radius: 50%;    /* circle */