⬜

Border Radius Tokens

DTCG Type: borderRadius

Border radius tokens define corner rounding for UI elements. They range from none (sharp corners) to full (pill shapes), establishing the visual tone of your design — from geometric to organic.

Token Examples

Token Name	Value
`radius.none`	`0`
`radius.sm`	`0.25rem`
`radius.md`	`0.5rem`
`radius.lg`	`0.75rem`
`radius.xl`	`1rem`
`radius.full`	`9999px`

CSS Properties

These CSS properties typically consume border radius tokens:

border-radius

Use Cases

✓

Button and input rounding

✓

Card and container corners

✓

Avatar and badge shapes (full = circle)

✓

Dialog and modal corners

✓

Chip and tag rounding

✓

Image masking

Usage Example

:root {
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}

.btn { border-radius: var(--radius-md); }
.card { border-radius: var(--radius-lg); }
.avatar { border-radius: var(--radius-full); }
.badge { border-radius: var(--radius-full); }

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Simple

Lightweight global-only tokens

Product / SaaS

Interactive product UI with semantic modes

Landing Page

Bold marketing with gradients and drama

Dashboard / Admin

Data-dense panels with chart colors

Mobile App

Touch-friendly native-feeling values

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// radius.none → 0
// radius.sm → 0.25rem
// radius.md → 0.5rem
// radius.lg → 0.75rem
// radius.xl → 1rem
// radius.full → 9999px

// CSS custom property:
// --radius-none: 0;
// --radius-sm: 0.25rem;

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