Border

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.element {
  border-width: var(--border-width-border-width-default);
}

Primitives

The values the semantic tokens point to. Components never use them directly.

• border-width/00px--border-width-border-width-0
• border-width/11px--border-width-border-width-1
• border-width/22px--border-width-border-width-2

Semantic

• border-width/none0px · border-width/0--border-width-border-width-none
• border-width/default1px · border-width/1--border-width-border-width-default
• border-width/focus2px · border-width/2--border-width-border-width-focus