Foundations / Rounded corners
Rounded corners
How rounded the corners are: eight radii, from square corner to circle, and two values of their own for cards.
Version 1.4 · Oct 20, 2026
Scale
The eight radii. Components use them directly or through their own radius, like the one for cards.
radius-none
0
Blocks and images that reach the edge
radius-sm
4 px
Small elements
radius-md
8 px
Dropdowns and tabs
radius-lg
12 px
Cards (radius-card)
radius-xl
16 px
Featured cards (radius-card-feature)
radius-2xl
24 px
Large containers
radius-full
9999 px
Buttons, tags and switches (pill shape)
radius-circle
50%
Round elements
Radii for cards
Cards do not use a standalone radius, but a named one that points to a step on the scale. So if the card radius changes, it changes everywhere.
Name (token)
Value
When to use it
radius-card
radius-lg · 12 px
Content, resource and service cards.
radius-card-feature
radius-xl · 16 px
Featured cards: blog, experience and feature lists.