Border Radius
Six steps from subtle to full. Radius is a density signal — tighter corners feel more utilitarian, rounder corners feel more approachable.
Scale
6pxborderRadius.smBadges, tags, kbd elements
10pxborderRadius.mdButtons, inputs, small cards
14pxborderRadius.lgCards, panels, modals
20pxborderRadius.xlFeature cards, image containers
28pxborderRadius.2xlHero sections, large surfaces
9999pxborderRadius.fullPills, avatars, circular buttons
Token Reference
| Token | Value | Tailwind | Use case |
|---|---|---|---|
borderRadius.sm | 6px | rounded-md | Badges, tags, kbd elements |
borderRadius.md | 10px | rounded-[10px] | Buttons, inputs, small cards |
borderRadius.lg | 14px | rounded-[14px] | Cards, panels, modals |
borderRadius.xl | 20px | rounded-[20px] | Feature cards, image containers |
borderRadius.2xl | 28px | rounded-[28px] | Hero sections, large surfaces |
borderRadius.full | 9999px | rounded-full | Pills, avatars, circular buttons |
Elements in use
Each radius maps to a specific family of elements. Mixing radii inside a component signals inconsistency — use the same step for all controls in a group.
Badge · sm · 6px
Button · md · 10px
Input · md · 10px
Card · lg · 14px
Feature card · xl · 20px
Avatar · full · pill
Principles
Larger elements use larger radii. A modal at 14px feels right; that same radius on a badge feels too round. Let the element's footprint guide the choice.
All interactive controls in a form — inputs, selects, buttons — should share the same radius. Inconsistency within a group signals a mistake, not variation.
borderRadius.full is for elements where height equals width, or for pill-shaped labels. Applying it to a wide button creates an awkward stadium shape.