Radius

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-radius: var(--border-radius-selection);
}

Primitives

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

• radius/00px--border-radius-0
• radius/44px--border-radius-4
• radius/88px--border-radius-8
• radius/1212px--border-radius-12
• radius/1616px--border-radius-16
• radius/99999999px--border-radius-9999

Semantic

• radius/none0px · radius/0--border-radius-none
• radius/selection4px · radius/4--border-radius-selection
• radius/container8px · radius/8--border-radius-container
• radius/control12px · radius/12--border-radius-control
• radius/overlay16px · radius/16--border-radius-overlay
• radius/full9999px · radius/9999--border-radius-full