Primitives
Border width
Line thickness for borders, dividers, and outlines.
Border width tokens control line thickness for borders, dividers, and outlines.
Width scale (primitives)
--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 | --border-width-none | No border (0px) |
| Small | --border-width-sm | Subtle hairline |
| Medium | --border-width-md | Default visible border |
| Large | --border-width-lg | Prominent border (1px) |
Width modes
Figma uses border-width modes for overall border density at a theme level.
| Mode | Effect |
|---|---|
| Thin | Minimal borders |
| Default | Standard borders |
| Thick | Prominent borders |
Related
- Border radius — pairs with width for component framing
- Color → Border tokens — semantic border-color tokens