Borders & Elevation

Radius, border widths, and shadow steps. Radius tokens derive from --radius so themes can retune the entire scale by changing one value.

Radius

--radius-sm

0.6× · 6px

--radius-md

0.8× · 8px

--radius-lg

1× · 10px

--radius-xl

1.4× · 14px

--radius-2xl

1.8× · 18px

--radius-3xl

2.2× · 22px

--radius-4xl

2.6× · 26px

rounded-full

∞ · 50%

border-0 (none)

border (1px) — default for cards/inputs

border-2 (2px) — emphasized edges

border-4 (4px)

border-8 (8px)

Interactive elements use a 3px ring at --color-ring with 50% opacity. Click or tab to the button below to preview.

shadow-sm

Subtle lift on hover states

shadow

Default card elevation

shadow-md

Popovers, dropdown menus

shadow-lg

Modals, dialogs, hover cards

shadow-xl

Floating action buttons, prominent overlays

shadow-2xl

Primary hero CTAs, fullscreen overlays