Border Radius
Consistent border radius values create visual harmony and define the personality of your interface.
Border Radius
Consistent border radius values create visual harmony and define the personality of your interface.
Radius
2px
rounded-[2px]Radius-2
4px
roundedRadius-3
6px
rounded-[6px]Radius-4
14px
rounded-[14px]Radius-5
24px
rounded-[24px]Radius-9
999px
rounded-fullBorder Radius Examples
Radius (2px)
Subtle rounding for minimal designs
Radius-2 (4px)
Standard rounding for most components
Radius-3 (6px)
Slightly more rounded for emphasis
Radius-4 (14px)
Prominent rounding for cards
Radius-5 (24px)
Heavy rounding for modern look
Radius-9 (999px)
Full rounding for pills and avatars