Corner Radius
| Field | Value |
|---|---|
| Type | Skill Resource |
| Source | ~/.copilot/skills/design/references/radius.md |
| Description | Not specified |
Source Content
Corner Radius
Source of truth: src/index.css — five [data-radius] presets override four --radius-* CSS custom properties. Canonical decision: ADR-002.
Default preset: [data-radius="md"]
This is the default unless a data-radius attribute overrides it.
| Token | CSS var | rem | px | Tailwind class | Use |
|---|---|---|---|---|---|
| xl | --radius-xl | 0.625rem | 10px | rounded-xl | Cards, panels, modals, dialogs, floating surfaces |
| lg | --radius-lg | 0.5rem | 8px | rounded-lg | Inputs, buttons, menu items, selects |
| md | --radius-md | 0.375rem | 6px | rounded-md | Badges, chips, segmented options, tooltips |
| sm | --radius-sm | 0.25rem | 4px | rounded-sm | Tight interior elements, table cells |
All five presets
| Preset | xl | lg | md | sm |
|---|---|---|---|---|
square | 0 | 0 | 0 | 0 |
sm | 6px (0.375rem) | 4px (0.25rem) | 3px (0.1875rem) | 2px (0.125rem) |
md (default) | 10px (0.625rem) | 8px (0.5rem) | 6px (0.375rem) | 4px (0.25rem) |
lg | 14px (0.875rem) | 12px (0.75rem) | 10px (0.625rem) | 8px (0.5rem) |
xl | 18px (1.125rem) | 16px (1rem) | 14px (0.875rem) | 12px (0.75rem) |
Setting a preset
Apply to any ancestor element — all rounded-* tokens inside inherit the preset’s scale:
<div data-radius="lg">...</div>The Tailwind classes rounded-xl, rounded-lg, rounded-md, rounded-sm always read from var(--radius-*) — they flex automatically with the preset (not Tailwind’s own 2px/4px/8px/12px defaults; these four sizes are overridden in tailwind.config.ts). rounded-2xl, rounded-3xl etc. remain Tailwind defaults (not overridden) — do not use for UI components.
rounded-full — circles only
rounded-full (9999px) is not part of the preset system and must be used intentionally:
- Step markers (numbered circles in stepper UI)
- Radio button dots
- Avatar/icon disc containers
- Status indicator dots (online, offline, etc.)
No pill shapes on interactive controls (buttons, inputs, badges). The design language is a restrained rectangle, not a capsule.
Component-radius quick reference
| Component | Radius |
|---|---|
| Card / Panel | rounded-xl |
| Modal / Dialog | rounded-xl |
| Dropdown menu | rounded-xl |
| Button | rounded-lg |
| Input / Select | rounded-lg |
| Badge / Chip | rounded-md |
| Tooltip | rounded-md |
| Segmented control option | rounded-md |
| Inline code | rounded-sm |
| Table row / cell | rounded-sm |
| Avatar / icon disc | rounded-full |
| Status dot | rounded-full |
scripts/lint_tokens.sh flags arbitrary-value radius classes (rounded-[...]) and warns on rounded-full usage so it can be verified as a genuine circle, not a button or input.