Border Radius
Border radius is a key element that shapes the feel of your UI. Components are designed with 6px (rounded-md) as the baseline.
Radius Scale
All radius tokens from sharp to fully rounded
rounded-noneSharp corners
rounded-smSlight rounding
rounded-baseDefault rounding
= rounded (DEFAULT)
rounded-mdInput, Button
rounded-lgDropdown, Container
rounded-xlCard, Modal
rounded-2xlFeature section
rounded-3xlHero element
rounded-fullCircle, Pill
| Token | Value | Preview | Use case |
|---|---|---|---|
rounded-none | 0px | Sharp corners | |
rounded-sm | 2px | Slight rounding | |
rounded-base= rounded (DEFAULT) | 4px | Default rounding | |
rounded-md | 6px | Input, Button | |
rounded-lg | 8px | Dropdown, Container | |
rounded-xl | 12px | Card, Modal | |
rounded-2xl | 16px | Feature section | |
rounded-3xl | 24px | Hero element | |
rounded-full | 9999px | Circle, Pill |
Visual Comparison
Component Radius
Choosing the right radius based on an element's role
Small elements
Subtle rounding that harmonizes with text
roundedroundedInteractive elements Baseline
Visual stability with a clickable impression
rounded-mdrounded-mdrounded-mdrounded-mdrounded-mdrounded-mdContainer elements
Expresses hierarchy with inner elements
rounded-lgrounded-lgLarge elements
Soft and approachable appearance
rounded-xlrounded-xlrounded-xlCircular / Pill elements
Elements with an icon-like role
rounded-fullrounded-fullrounded-fullNested Radius
When nesting rounded elements, the inner radius should equal the outer radius minus the padding to keep curves parallel.
inner=outer−paddinginner = outer makes curves uneven —
not parallel with the outer shape
inner = outer − padding
24px − 12px = 12px gives natural parallel curves
Common patterns
outer: 12px
padding: 8px
inner: 4px
outer: 16px
padding: 12px
inner: 4px
outer: 24px
padding: 16px
inner: 8px