Border Radius — uicraft

Scale

Complete border-radius scale with token names, pixel and rem values.

Name	px	rem
none	0	0
micro	2	0.125
tiny	4	0.25
small	6	0.375
medium	8	0.5
large (base)	12	0.75
big	16	1
huge	24	1.5
full	9999	9999px

Visual Comparison

All radius values side by side.

html

none 0px

micro 2px

tiny 4px

small 6px

medium 8px

large (base) 12px

big 16px

huge 24px

full 9999px

<div class="uc-rounded-none uc-w-16 uc-h-16 uc-bg-accents-blue/15 uc-border-2 uc-border-accents-blue"></div>
<div class="uc-rounded 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-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-accents-blue uc-text-constant-white">none</button>
<button class="uc-rounded uc-h-10 uc-px-4 ...">tiny</button>
<button class="uc-rounded-md uc-h-10 uc-px-4 ...">medium</button>
<button class="uc-rounded-xl uc-h-10 uc-px-4 ...">large</button>
<button class="uc-rounded-full uc-h-10 uc-px-4 ...">full</button>

html

Cards

none

Sharp corners

small

6px

medium

8px

large

12px (base)

big

16px

<div class="uc-rounded-none 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-md 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-neutrals-surface uc-px-3">
<input type="text" placeholder="tiny" class="uc-rounded uc-h-10 uc-w-36 ...">...</input>
<input type="text" placeholder="medium" class="uc-rounded-md 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

small

EF

large

GH

full

<div class="uc-rounded-none uc-w-14 uc-h-14 uc-bg-neutrals-muted uc-flex uc-items-center uc-justify-center">...</div>
<div class="uc-rounded-lg uc-w-14 uc-h-14 ...">...</div>
<div class="uc-rounded-xl uc-w-14 uc-h-14 ...">...</div>
<div class="uc-rounded-full uc-w-14 uc-h-14 ...">...</div>

CSS Tokens

Token names, UC classes, and pixel values.

Token	UC	px
none	rounded-none	0
micro	rounded-sm	2px
tiny	rounded	4px
small	rounded-lg	6px
medium	rounded-lg	8px
large (base)	rounded-xl	12px
big	rounded-2xl	16px
huge	rounded-3xl	24px
full	rounded-full	9999px