CSS Border Radius Generator
Runs in your browser — your data is never uploaded.
Set each corner independently and get the border-radius rule to paste. The output collapses to the shortest equivalent form — four identical corners become one value, not four — so what you copy looks like something a person wrote. Works in pixels or percentages, and the notes cover the two behaviours that surprise people: how percentages resolve, and what happens when a radius is larger than the element.
How to use Border Radius Generator
- 1
Set the radius for each corner, clockwise from the top-left.
- 2
Choose pixels or percent.
- 3
Click “Generate” and copy the CSS.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
What order are the corners in?+
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. The shorthand collapses when corners repeat, which is why the output is often shorter than four values.
How do I make a circle?+
50% on all four corners turns a square into a circle. On a rectangle it produces an ellipse, because a percentage resolves against each axis separately rather than against one dimension.
How do I make a pill shape?+
Use a radius larger than half the element — 9999px is the common idiom. Browsers clamp it to the maximum the shape allows, so it stays a perfect pill at any size without you calculating anything.