🔲

Border Tokens

DTCG Type: border

Border tokens define border width, style, and combined shorthand values. They create visual boundaries between elements and provide structural definition.

Token Examples

Token Name	Value
`borderWidth.thin`	`1px`
`borderWidth.medium`	`2px`
`borderWidth.thick`	`4px`

CSS Properties

These CSS properties typically consume border tokens:

borderborder-widthoutline-width

Use Cases

✓

Input and form field borders

✓

Divider and separator lines

✓

Card and container outlines

✓

Table cell borders

✓

Focus indicators

✓

Decorative borders

Usage Example

:root {
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;
}

.input {
  border: var(--border-thin) solid var(--color-border);
}
.input:focus {
  border-width: var(--border-medium);
  border-color: var(--color-primary);
}
.divider {
  border-top: var(--border-thin) solid var(--color-border);
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Product / SaaS

Interactive product UI with semantic modes

Dashboard / Admin

Data-dense panels with chart colors

Email Template

Email-safe px units + web-safe fonts

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// borderWidth.thin → 1px
// borderWidth.medium → 2px
// borderWidth.thick → 4px

// CSS custom property:
// --borderWidth-thin: 1px;
// --borderWidth-medium: 2px;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides