What is a normal border-radius?
Across 423 live-measured design systems, the median border-radius is 8px. Corners are soft by default: only 3% ship sharp 0px, 21% go fully pill, and 40% sit in the 6–12px band.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/measured/border-radius.
8px median border-radius
Distribution
| 8px | 69 | |
| 4px | 48 | |
| 6px | 48 | |
| 3px | 32 | |
| 12px | 32 | |
| 2px | 22 |
At a glance
| median radius | 8px |
| ship sharp 0px | 3% |
| fully pill | 21% |
| 6–12px band | 40% |
| sites measured | 423 |
Questions people (and AI assistants) actually ask
What border-radius should I use for buttons and cards?
8px is the single most common measured value; the median across 423 systems is 8px, and the 6–12px band covers 40% of production sites.
Are sharp (0px) or rounded corners more modern?
Rounded. Only 3% of measured sites ship sharp 0px corners — the web overwhelmingly rounds, gently.
When should I use a fully rounded (pill) radius?
21% of measured sites use pill shapes, typically for small buttons, tags and avatars rather than cards.
Related measured norms
Standard button height · 4px vs 8px spacing grid · Most common accent colour