Border
Border radius and stroke width tokens — control the roundness and thickness of component edges consistently across the design system.
Radius Scale
Complete border-radius scale with token names, pixel and rem values.
| Name | px | rem | Preview |
|---|---|---|---|
| none | 0 | 0 | |
| xs | 4 | 0.25 | |
| sm | 8 | 0.5 | |
| lg (base) | 12 | 0.75 | |
| xl | 16 | 1 | |
| 2xl | 24 | 1.5 | |
| 3xl | 32 | 2 | |
| 4xl | 40 | 2.5 | |
| full | 9999 | 9999px |
Visual Comparison
All radius values side by side.
html
none
0px
xs
4px
sm
8px
lg (base)
12px
xl
16px
2xl
24px
3xl
32px
4xl
40px
full
9999px
<div class="vt-rounded-none vt-w-16 vt-h-16 vt-bg-info-primary/15 vt-border-2 vt-border-info-primary"></div>
<div class="vt-rounded-xs vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-sm vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-lg vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-xl vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-2xl vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-3xl vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-4xl vt-w-16 vt-h-16 ..."></div>
<div class="vt-rounded-full vt-w-16 vt-h-16 ..."></div>Applied Examples
How border-radius tokens look on common UI elements.
html
Buttons
<button class="vt-rounded-none vt-h-10 vt-px-4 vt-bg-info-primary vt-text-generic-white">none</button>
<button class="vt-rounded-xs vt-h-10 vt-px-4 ...">xs</button>
<button class="vt-rounded-sm vt-h-10 vt-px-4 ...">sm</button>
<button class="vt-rounded-lg vt-h-10 vt-px-4 ...">lg</button>
<button class="vt-rounded-full vt-h-10 vt-px-4 ...">full</button>
html
Cards
none
Sharp corners
sm
8px
lg
12px (base)
xl
16px
2xl
24px
<div class="vt-rounded-none vt-border vt-border-border-default vt-p-3 vt-w-36">...</div>
<div class="vt-rounded-sm vt-border vt-border-border-default vt-p-3 vt-w-36">...</div>
<div class="vt-rounded-lg vt-border vt-border-border-default vt-p-3 vt-w-36">...</div>
<div class="vt-rounded-xl vt-border vt-border-border-default vt-p-3 vt-w-36">...</div>
<div class="vt-rounded-2xl vt-border vt-border-border-default vt-p-3 vt-w-36">...</div>
html
Inputs
<input type="text" placeholder="none" class="vt-rounded-none vt-h-10 vt-w-36 vt-border vt-border-border-strong vt-bg-surfaces-surface vt-px-3">
<input type="text" placeholder="xs" class="vt-rounded-xs vt-h-10 vt-w-36 ...">
<input type="text" placeholder="sm" class="vt-rounded-sm vt-h-10 vt-w-36 ...">
<input type="text" placeholder="full" class="vt-rounded-full vt-h-10 vt-w-36 ...">
html
Avatars
AB
none
CD
sm
EF
lg
GH
full
<div class="vt-rounded-none vt-w-14 vt-h-14 vt-bg-surfaces-moderate vt-flex vt-items-center vt-justify-center">...</div>
<div class="vt-rounded-sm vt-w-14 vt-h-14 ...">...</div>
<div class="vt-rounded-lg vt-w-14 vt-h-14 ...">...</div>
<div class="vt-rounded-full vt-w-14 vt-h-14 ...">...</div>Radius Tokens
Token names, UC classes, and pixel values.
| Token | UC | px |
|---|---|---|
| none | rounded-none | 0 |
| xs | rounded-xs | 4px |
| sm | rounded-sm | 8px |
| lg (base) | rounded-lg | 12px |
| xl | rounded-xl | 16px |
| 2xl | rounded-2xl | 24px |
| 3xl | rounded-3xl | 32px |
| 4xl | rounded-4xl | 40px |
| full | rounded-full | 9999px |
Border Width
Stroke width tokens for consistent border thickness. The active theme preset determines the default value.
--border-width-thin
0.5px — Subtle strokes, dividers
--border-width-default
1px — Standard borders
--border-width-medium
1.5px — Emphasized borders
--border-width-thick
2px — Bold borders, focus rings
| Token | Value | Usage |
|---|---|---|
| --border-width-thin | 0.5px | Subtle strokes, dividers |
| --border-width-default | 1px | Standard borders |
| --border-width-medium | 1.5px | Emphasized borders |
| --border-width-thick | 2px | Bold borders, focus rings |