Border
Corner rounding and line thickness — the two token families that frame a component's edge.
Border tokens frame a component's edge in two axes: radius (corner rounding) and width (line thickness). Each carries a theme-level mode so a brand can shift the overall feel in one move.
Border radius
Border radius tokens control corner rounding across components — from sharp (0px) to pill (999px), with circle reserved for fully circular elements (avatars, dots).
Radius scale
0px2px4px8px10px12px14px16px20px24px28px32px36px40px44px48px999px999px9999px9999pxSemantic radius tokens
| Token | CSS Variable | Description |
|---|---|---|
| None | --bds-border-radius-none | No rounding (0px) |
| Small | --bds-border-radius-sm | Subtle rounding |
| Medium | --bds-border-radius-md | Default component radius |
| Large | --bds-border-radius-lg | Prominent rounding |
| Pill | --bds-border-radius-pill | Maximum rounding (999px) |
Radius modes
Radius modes are not wired yet — this is the planned design, not a shipped switch. Unlike width modes and spacing, there is no modes-borderradius.css and no data-mode-radius selector ships in dist/tokens.css today. Setting the attribute does nothing until #340 (wire data-mode overrides for non-color tokens) lands. Change the radius feel per theme by overriding the --border-radius-* semantic values directly for now.
Figma defines border-radius modes to drive the overall shape feel of a theme. Once #340 wires them, data-mode-radius will select one (default soft):
| Mode | Effect | Use case |
|---|---|---|
| Sharp | All radii near 0 | Corporate, minimal |
| Soft | Moderate radii | Default, balanced |
| Round | Generous radii | Friendly, modern |
| Pill | Maximum radii (999px) | Buttons, tags |
Border width
Border width tokens control line thickness for borders, dividers, and outlines.
Width scale
--border-width-00px--border-width-25.25px--border-width-50.5px--border-width-1001px--border-width-2002px--border-width-3003px--border-width-4004px--border-width-5005px--border-width-6006pxSemantic width tokens
| Token | CSS Variable | Description |
|---|---|---|
| None | --bds-border-width-none | No border (0px) |
| Small | --bds-border-width-sm | Subtle hairline |
| Medium | --bds-border-width-md | Default visible border |
| Large | --bds-border-width-lg | Prominent border (4px default; varies by border-width mode) |
Width modes
Border density is a theme-level mode. Set data-mode-borderwidth on :root (or any subtree) to shift every --border-width-* semantic token at once; the default (no attribute) keeps the standard values. Two override modes ship today — thin and bold — wired in tokens/modes-borderwidth.css:
| Token | default | thin | bold |
|---|---|---|---|
--bds-border-width-sm | 1px | 1px | 2px |
--bds-border-width-md | 2px | 1px | 3px |
--bds-border-width-lg | 4px | 2px | 4px |
<html data-mode-borderwidth="bold"> <!-- whole document -->
<section data-mode-borderwidth="thin">…</section> <!-- one subtree -->thin matches default at sm because sub-pixel borders below 1px render unreliably across browsers. Values verified against dist/tokens.css; re-pull after a Figma mode change (npm run build:sd-figma).
Related
- Color → Border tokens — semantic border-color tokens
- Elevation — elevation that complements radius and width choices