About this tool
Rounded corners set the tone of an interface, and border-radius can do far more than one uniform value. This generator lets you round each corner independently, and use the full eight-value horizontal / vertical syntax to create soft, organic “blob” shapes that look nothing like a plain rectangle.
Drag the sliders, watch the shape update live, and copy the border-radius CSS. It all runs in your browser.
Frequently asked questions
What's the difference between linked and per-corner mode?
Linked mode applies one uniform pixel radius to all four corners; unchecking it switches to per-corner mode, where you set an independent horizontal and vertical percentage for each corner.
Can I create elliptical (non-circular) corners?
Yes. Switch to per-corner mode and set different horizontal and vertical percentages — CSS border-radius supports two radii per corner, and this tool exposes both.
How do I make a perfect circle or pill shape?
For a circle, set the uniform radius to 50% of the element's width/height (or use per-corner mode at 50%/50%); for a pill shape, set the radius to at least half the element's height.
Is my design uploaded anywhere?
No. The preview box and generated CSS are computed locally in your browser only.
Why does the output sometimes use a slash (/) in the CSS?
The slash separates horizontal and vertical radii (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — that only appears in per-corner mode, since linked mode needs just one value.