How to Choose the Right Border-Radius
A border-radius proportional to the element's size always looks more natural than an arbitrary fixed value. Applying 20px to a tiny 32px-tall button nearly turns it into a circle — unintentional and distracting. A huge card with only 2px rounding barely shows any softening effect.
A reliable rule: use 5–20% of the shorter dimension. Five percent gives a subtle softening; 10% gives a clearly rounded appearance; 20% creates a prominently curved shape. Round your result to the nearest 4px to stay on-grid.
Pill and Circle Shapes
Use border-radius: 9999px for pills — the browser automatically caps it at half the element's height, so you never need to calculate the exact value. Apply border-radius: 50% on any square element to get a perfect circle.
Frequently Asked Questions
5–20% of the shorter dimension. Buttons: 4–8px, cards: 8–16px, large modals: 16–24px.
Use border-radius: 9999px. The browser applies half the height automatically.
iOS uses 12–16pt for cards, 10pt for buttons. Material Design 3 uses shape tokens from 4–28dp.