Foundations

Corner radius

9 tokens (plus full) covering everything from tiny chips to large mobile surfaces. Radius communicates hierarchy: the bigger the surface, the softer the corner. Aligned with the Design Figma file (shadcndesign.com).

Updated Jul 8, 2026 by Leonardo Posada

Scale

rounded-none
— · 0px

Sharp corners. Table cells, dividers, edge-to-edge sections.

rounded-xs
--radius-xs · 2px

Micro elements: tiny badges, checkboxes, small chips.

rounded-sm
--radius-sm · 6px

Chips, small badges, internal tabs.

rounded-md
--radius-md · 8px

Buttons, inputs, dropdown items. System default.

rounded-lg
--radius-lg · 10px

Cards, dialogs, previews.

rounded-xl
--radius-xl · 14px

Larger surfaces: elevated cards, hero tiles.

rounded-2xl
--radius-2xl · 16px

Modals, sheets.

rounded-3xl
--radius-3xl · 24px

Mobile sheets, hero blocks.

rounded-4xl
--radius-4xl · 32px

Extra large surfaces, mobile pill CTAs.

rounded-full
— · 9999px

Avatars, circular icons, indicators.

Usage

Do
  • Use rounded-md as default for interactive elements (buttons, inputs).
  • Cards always rounded-lg. Dialogs rounded-lg or rounded-xl.
  • rounded-full only for avatars, dots, and circular toggles.
  • Keep radius consistent within the same component.
Don't
  • Don't invent custom radii (5, 7, 9, 14px).
  • Don't mix large radii with small inputs (accidental pill).
  • Don't use rounded-none — the DS has no hard edges.
  • Don't apply rounded to content images — only frames/cards.