Border Radius Generator
Round corners visually.
Border Radius Generator at a glance
Border Radius Generator is a free online developer tool you can use right now to round corners visually โ no account, no install and no usage limit. It runs entirely inside your browser, so whatever you enter stays on your own device.
- Price
- Free โ no trial, no paid tier, no watermark
- Sign-up
- Not required
- Where it runs
- In your browser โ nothing is uploaded to a server
- Works on
- Chrome, Safari, Firefox and Edge โ desktop, tablet and phone
- Category
- Developer Tools
About Border Radius Generator
Drag each corner to the radius you want and copy the resulting border-radius declaration, including the shorthand for setting all four corners at once.
The property accepts one to four values and the order is clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Two values set the diagonal pairs. The slash syntax is the one people rarely learn โ values before the slash are horizontal radii and after it vertical, which produces elliptical rather than circular corners and is how organic blob shapes are made in pure CSS.
For a perfect circle from a square element, set the radius to 50%. Percentages resolve against the element's own dimensions, so 50% on a non-square element produces an ellipse rather than a circle, which is usually what you want for a pill-shaped button โ though a very large pixel value such as 9999px is the more reliable way to get a pill, since it caps at half the height regardless of width.
One detail that catches people out: when adjacent radii together exceed the length of a side, the browser scales all radii down proportionally to fit. That is why setting a very large radius on a short element produces something smaller than the number you typed, rather than a broken shape.
How to use Border Radius Generator
- Adjust each corner individually, or set one value for all four.
- Switch on the elliptical option if you want different horizontal and vertical radii.
- Copy the generated CSS.
Frequently asked questions
What order do the four values go in?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. With two values, the first sets the top-left and bottom-right pair and the second the other diagonal.
How do I make a perfect circle?
Set border-radius to 50% on a square element. On a non-square element 50% gives an ellipse, because percentages resolve against each dimension separately.
What does the slash in border-radius mean?
It separates horizontal from vertical radii โ values before the slash are horizontal, after it vertical. Different values produce elliptical corners, which is how organic blob shapes are built in pure CSS.
Why is my radius smaller than the value I set?
When adjacent radii together exceed the length of a side, the browser scales all of them down proportionally so the shape stays valid. A large radius on a short element is capped at half its height.