# Shape

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.

<Tabs>
<Tab title="Overview">

## Progression

```dh-strip
kind: radius
desc: 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.
none | 0
x-small | 4
small | 8
medium | 16
large | 24
x-large | 40
xx-large | 64
full | 9999
```

```dh-principles
#006aff | Token names, not pixels | Never write border-radius: 12px in component code. Reference the semantic token — it survives theming and global radius updates.
#189f60 | Nested radius rule | An inner element's radius should be: outer-radius − padding. A card with medium (16px) and 8px padding → inner radius ≈ small (8px).
#820ad1 | Full is intentional | Use full (9999px) only where circular form carries semantic meaning — avatars, icon buttons, pill badges, toggle tracks.
```

## Step context

```dh-principles
#006aff | Controls | Interactive elements — inputs, buttons, selects, list items. Steps: none, x-small, small.
#189f60 | Containers | Surfaces that wrap content — cards, panels, modals, sheets. Steps: medium, large, x-large.
#820ad1 | Decorative | Art-directed surfaces and circular elements. Steps: xx-large, full.
```

</Tab>
<Tab title="Scale">

```dh-scale
kind: radius
none | Border.Radius.none | 0 | --border-radius-none
x-small | Border.Radius.x-small | 4 | --border-radius-x-small
small | Border.Radius.small | 8 | --border-radius-small
medium | Border.Radius.medium | 16 | --border-radius-medium
large | Border.Radius.large | 24 | --border-radius-large
x-large | Border.Radius.x-large | 40 | --border-radius-x-large
xx-large | Border.Radius.xx-large | 64 | --border-radius-xx-large
full | Border.Radius.full | 9999 | --border-radius-full
```

</Tab>
<Tab title="Usage">

```dh-usage
kind: radius
none | 0px | Reserved for structural elements that span full width — dividers, progress fills, full-bleed images. No rounding. | Dividers, Progress bars, Full-bleed images
x-small | 4px | Keeps elements sharp and precise. Best for dense inline elements where rounding would consume too much visual space. | Chips, Tags, Badges
small | 8px | The default for interactive controls. Inputs, buttons, and selects all use this step. | Inputs, Dropdowns, Buttons, List items
medium | 16px | The default for containers — cards, sheets, and informational panels. | Cards, Panels, Dialogs, Drawers
large | 24px | For emphasis. Modal dialogs, bottom sheets, and featured content areas. | Modals, Bottom sheets, Featured cards
x-large | 40px | Rare. Used for hero-level surfaces that need strong visual distinction. | Hero cards, Large overlays
xx-large | 64px | Decorative only. Avoid for functional UI. | Decorative surfaces
full | 9999px | A fully rounded pill. Avatars, icon buttons, toggle tracks, and pill-style badges. | Avatars, Icon buttons, Pill badges, Toggles
```

</Tab>
</Tabs>