Toolstia / CSS border radius generator
CSS border radius generator
Round the corners of a box and see the result straight away. Change all four corners together or one at a time, then copy the CSS.
How it works
- Enter a radius for each corner, or link them.
- Choose the unit.
- Copy the CSS.
Corner order
Values go clockwise from the top left: top left, top right, bottom right, bottom left.
Shortest form
The tool writes the shortest valid shorthand. Four equal corners become one value, and matching pairs become two.
Units
Pixels give a fixed curve. Percent scales with the box, and 50 percent on a square makes a circle.
Pills and circles
A very large pixel radius on a wide box makes a pill shape. Use 50 percent for circles and ovals.
Questions
Can I set elliptical corners?
This tool sets circular corners. Elliptical corners use a slash in the CSS, which you can add by hand.
Does 0 need a unit?
No. A zero radius is written without a unit.
Is anything uploaded?
Everything happens in your browser, and nothing you type is sent anywhere.