Corner radius defines the personality of UI surfaces — from sharp precision to fully rounded pills. Always use semantic names like small or medium, not raw pixel values.
Progression
The scale moves from no rounding (none) through functional steps (x-small → large) to decorative (xx-large) and full pill (full). Each step has a designated role — mixing steps within a component breaks visual logic.
Never write border-radius: 12px in component code. Reference the semantic token — it survives theming and global radius updates.
An inner element's radius should be: outer-radius − padding. A card with medium (16px) and 8px padding → inner radius ≈ small (8px).
Use full (9999px) only where circular form carries semantic meaning — avatars, icon buttons, pill badges, toggle tracks.
Step context
Interactive elements — inputs, buttons, selects, list items. Steps: none, x-small, small.
Surfaces that wrap content — cards, panels, modals, sheets. Steps: medium, large, x-large.
Art-directed surfaces and circular elements. Steps: xx-large, full.
0pxReserved for structural elements that span full width — dividers, progress fills, full-bleed images. No rounding.DividersProgress barsFull-bleed images4pxKeeps elements sharp and precise. Best for dense inline elements where rounding would consume too much visual space.ChipsTagsBadges8pxThe default for interactive controls. Inputs, buttons, and selects all use this step.InputsDropdownsButtonsList items16pxThe default for containers — cards, sheets, and informational panels.CardsPanelsDialogsDrawers24pxFor emphasis. Modal dialogs, bottom sheets, and featured content areas.ModalsBottom sheetsFeatured cards40pxRare. Used for hero-level surfaces that need strong visual distinction.Hero cardsLarge overlays64pxDecorative only. Avoid for functional UI.Decorative surfaces9999pxA fully rounded pill. Avatars, icon buttons, toggle tracks, and pill-style badges.AvatarsIcon buttonsPill badgesToggles