Safe starting point
6–8 px
Border radius
Applies to All viewports
How round corners are. Pick two or three values and tie them to component size, not to taste per component.
- 0
- 4
- 8
- 12
- 16
- 24
- Full
Common range 0–4 sharp, 6–8 general, 10–12 softer, 16–24 large surfaces, full for pills
- 0–4
- Sharp. Technical, dense and enterprise interfaces; table cells; small tags.
- 6–8
- General purpose. A safe default for buttons, fields and cards in product UI.
- 10–12
- Softer. A more relaxed, consumer feel; larger cards.
- 16–24
- Large surfaces. Sheets, large modals and expressive marketing surfaces.
- Full
- Pill. Chips, avatars and capsule controls.
Why?
Radius sets the tone of a product more than almost any other value, and inconsistency in it is easy to see.
When to deviate. Follow the platform or design system first. Scale radius with size: a large radius on a small control turns it into a pill.
Common mistakes (4)
- Five or more radius values on one screen.
- A rounded card inside a rounded card inside a rounded panel.
- Inner corners rounder than the container holding them.
- Everything rounded because it looks modern.
AI-look warning. Large rounded cards used everywhere are one of the most common marks of template or generated UI.
Official guidanceSGDSMaterial
- SGDS
0 and 2 px for tables and dividers; 4 px for tags and small icon buttons; 8 px for cards, modals, dropdowns and inputs; 12 and 16 px for large modals and banners; 24 px for feature cards; full for avatars.
SGDS, Border(opens in a new tab)Design-system convention
- Material
Shape scale: extra small 4 dp, small 8 dp, medium 12 dp, large 16 dp, extra large 24 dp.
Android Developers, Material Design 3 in Compose(opens in a new tab)Design-system convention