Border Radius Generator
Round each corner of a box independently and copy the border-radius CSS, in percent or pixels.
1 min read
Runs in your browser — your text and files never leave your device.
24%
24%
24%
24%
Four sliders and one preview: set the corners the way you want them, link them if you would rather move them together, and copy the CSS.
How to use it
- Choose percent or pixels.
- Move each corner, or link them to move all four together.
- Copy the CSS rule.
Good to know
- Percentages round relative to the box’s own size, so the same value looks different on a wide box and a tall one.
- Pixels are the safer choice for buttons and inputs that must keep their shape at any width.
Related tools: CSS Shadow Generator · Gradient Generator
Frequently asked questions
When should I use percent instead of pixels?
Percent suits pills, avatars and organic shapes that should scale with the element; pixels suit fixed controls.
How do I make a pill shape?
Set every corner to at least half the element’s height — 9999px is the usual shortcut.