Foundations
Radius
A comprehensive set of border radius values for consistent rounded corners across your design system.
Radius-0
var(--radius-none)
0px
Radius-4
var(--radius-xs)
4px
Radius-8
var(--radius-sm)
8px
Radius-10
var(--radius-md)
10px
Radius-12
var(--radius-md-plus)
12px
Radius-16
var(--radius-lg)
16px
Radius-20
var(--radius-xl)
20px
Radius-24
var(--radius-2xl)
24px
Radius-28
var(--radius-3xl)
28px
Radius-32
var(--radius-4xl)
32px
Radius-999
var(--radius-full)
999px