Design Tokens
The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.
Border Radius
Thoughtful corner radius that brings softness and personality to every interface element
10
Radius Steps
∞
From Sharp to Round
✓
Perfect Curves
Radius Scale
From sharp precision to gentle curves, each radius serves a purpose
Visual Scale
none
0
xs
0.125rem
sm
0.25rem
md
0.5rem
lg
0.75rem
xl
1rem
2xl
1.5rem
3xl
2rem
4xl
3rem
full
9999px
See radius applied to different UI components in the playground below
Radius in Context
See how different radius values work across various UI components
UI Elements
Input r(md)
Badge r(lg)Cards & Panels
Card r(lg)
Panel r(xl)
Container r(2xl)
Special Cases
full
Pill Button
Perfect Curves
From sharp precision to gentle curves, radius creates personality and hierarchy in your interface.
Purposeful
Each radius value serves a specific purpose in the interface hierarchy
Harmonious
Consistent scaling creates visual harmony across all component sizes
Modern
Contemporary radius values that feel fresh and approachable