Border Radius
Border radius tokens provide consistent corner rounding throughout the design system. From sharp corners to fully rounded elements.
Radius Scale
Use these values with Tailwind classes like rounded-lg, rounded-xl, etc.
none
rounded-none0sm
rounded-sm0.25remmd
rounded-md0.375remDEFAULT
rounded0.5remlg
rounded-lg0.5remxl
rounded-xl0.75rem2xl
rounded-2xl1rem3xl
rounded-3xl1.5remfull
rounded-full9999pxUsage Examples
Common border radius patterns in the design system
Buttons
Cards
Avatars
Inputs