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="uc-rounded-none uc-w-16 uc-h-16 uc-bg-info-primary/15 uc-border-2 uc-border-info-primary"></div>
<div class="uc-rounded-xs uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-sm uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-lg uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-xl uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-2xl uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-3xl uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-4xl uc-w-16 uc-h-16 ..."></div>
<div class="uc-rounded-full uc-w-16 uc-h-16 ..."></div>Applied Examples
How border-radius tokens look on common UI elements.
html
Buttons
<button class="uc-rounded-none uc-h-10 uc-px-4 uc-bg-info-primary uc-text-generic-white">none</button>
<button class="uc-rounded-xs uc-h-10 uc-px-4 ...">xs</button>
<button class="uc-rounded-sm uc-h-10 uc-px-4 ...">sm</button>
<button class="uc-rounded-lg uc-h-10 uc-px-4 ...">lg</button>
<button class="uc-rounded-full uc-h-10 uc-px-4 ...">full</button>
html
Cards
none
Sharp corners
sm
8px
lg
12px (base)
xl
16px
2xl
24px
<div class="uc-rounded-none uc-border uc-border-border-default uc-p-3 uc-w-36">...</div>
<div class="uc-rounded-sm uc-border uc-border-border-default uc-p-3 uc-w-36">...</div>
<div class="uc-rounded-lg uc-border uc-border-border-default uc-p-3 uc-w-36">...</div>
<div class="uc-rounded-xl uc-border uc-border-border-default uc-p-3 uc-w-36">...</div>
<div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-3 uc-w-36">...</div>
html
Inputs
<input type="text" placeholder="none" class="uc-rounded-none uc-h-10 uc-w-36 uc-border uc-border-border-strong uc-bg-surfaces-surface uc-px-3">
<input type="text" placeholder="xs" class="uc-rounded-xs uc-h-10 uc-w-36 ...">
<input type="text" placeholder="sm" class="uc-rounded-sm uc-h-10 uc-w-36 ...">
<input type="text" placeholder="full" class="uc-rounded-full uc-h-10 uc-w-36 ...">
html
Avatars
AB
none
CD
sm
EF
lg
GH
full
<div class="uc-rounded-none uc-w-14 uc-h-14 uc-bg-surfaces-moderate uc-flex uc-items-center uc-justify-center">...</div>
<div class="uc-rounded-sm uc-w-14 uc-h-14 ...">...</div>
<div class="uc-rounded-lg uc-w-14 uc-h-14 ...">...</div>
<div class="uc-rounded-full uc-w-14 uc-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 |