Border Radius
Radius tokens xs–full: when to use each step, per-corner utilities, and how radius signals personality.
Token Scale
Six steps from sharp to pill. The project default is
--radius-sm — use it unless a component has a clear
reason to deviate.
--radius-xs
--radius-sm
★ preferred
--radius-md
--radius-lg
--radius-xl
--radius-full
Interactive Range
Drag the slider to explore the full radius spectrum from
0 to 9999px.
Per-corner Control
Tailwind's logical corner utilities —
rounded-tl-*, rounded-tr-*,
rounded-bl-*, rounded-br-* —
let you radius individual corners independently.
Use for chat bubbles, tab active states, and asymmetric cards.
Common patterns
Component Usage Map
Each component type has a radius that matches its visual weight. Mixing steps arbitrarily makes an interface feel inconsistent — map once, apply everywhere.
--radius-xs
--radius-sm
--radius-sm
--radius-sm
--radius-md
--radius-md
--radius-md
--radius-lg
--radius-lg
--radius-xl
--radius-full
--radius-full
Radius as Personality
Radius is one of the fastest ways to signal brand character. Below is the same card at four radius levels — the content is identical, the feeling is not.
0rem
0.375rem
0.75rem
1.25rem
Token Reference
/* css/token.css */ --radius-xs: 0.25rem; /* 4px — Chip, tag, micro badge */ --radius-sm: 0.375rem; /* 6px — Input, badge, tooltip — preferred default */ --radius-md: 0.75rem; /* 12px — Card, button, dropdown */ --radius-lg: 1.25rem; /* 20px — Modal, panel, sheet */ --radius-xl: 2rem; /* 32px — Hero card, feature block */ --radius-full: 9999px; /* 9999px — Pill button, avatar, toggle */
Always reference the token, never the raw value.
border-radius: var(--radius-sm), not border-radius: 0.375rem.
Token references survive future scale changes; hardcoded values don't.