About css border radius generator
The border-radius property rounds the corners of an element. You can set one value for all corners or a different value for each.
Useful values
- A small radius (4 to 8 px) gives a subtle, professional look.
- A value of 50% on a square makes a circle.
- A very large pixel value on a short element makes a pill shape.
Per-corner control
The four values go in the order top-left, top-right, bottom-right, bottom-left. Different values make leaf shapes and speech bubbles.
A worked example
A card with border-radius: 16px has softly rounded corners. A profile photo made circular uses border-radius: 50% on a square image. A pill-shaped button on a 44 px tall element uses border-radius: 22px or more.
Mistakes to avoid
- Mixing many different radii on one screen, which looks inconsistent.
- Rounding an element but forgetting overflow: hidden, so the child content pokes out of the corners.
- Using percentages on non-square elements and expecting circles.
