Foundation
Corner (Border) Radius
Border radius values style the rounding of any element — images, buttons, cards, and overlays. Just like the spacing scale, working from a defined radius system lets you move faster and stay consistent. Always apply a rounded-* utility; never hardcode a radius.
NameSize (PX)Visual Represent
rounded-0--radius-0
0px
Sharp edges, dividers, table cells
rounded-2--radius-2fine
2px
Checkbox, small indicators
rounded-4--radius-4
4px
Badges, tags, tooltips
rounded-6--radius-6fine
6px
Compact buttons, small chips
rounded-8--radius-8
8px
Buttons, inputs, form fields
rounded-12--radius-12
12px
Cards, dropdowns
rounded-16--radius-16
16px
Modals, drawers, panels
rounded-20--radius-20
20px
Large surface containers
rounded-24--radius-24
24px
Prominent cards, banners
rounded-32--radius-32
32px
Pill buttons, large badges
rounded-48--radius-48
48px
Large pill / floating elements
rounded-full--radius-full
9999px
Avatars, circular icons, toggle