What is the CSS Border Radius Generator?
Set individual corner radii visually and generate the border-radius shorthand or individual corner values. Preview on rectangles, squares, and text elements.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Border Radius Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Drag the corner handles
Each corner has an independent handle. Drag to set the radius. Hold Shift to link all corners together.
Switch between uniform and individual modes
Toggle Uniform to set all corners at once. Toggle Individual to set each corner separately for asymmetric shapes.
Copy the border-radius value
Click Copy to get the shortest valid CSS shorthand for your corner values.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* All corners equal */
.card { border-radius: 12px; }
.badge { border-radius: 9999px; } /* pill */
.avatar { border-radius: 50%; } /* circle */
/* Individual corners */
.chat-bubble-sent {
border-radius: 18px 18px 4px 18px;
/* top-left top-right bottom-right bottom-left */
}
/* Per-corner shorthand: horizontal/vertical radii */
.leaf {
border-radius: 0 60% 0 60% / 60% 0 60% 0;
}border-radius: 50% on a square element creates a perfect circle. On a rectangle it creates an ellipse.
Pro tips for better results
Use 9999px for pill buttons instead of 50%
50% on a wide button creates an oval that may clip content. 9999px guarantees fully rounded ends regardless of button dimensions.
Even small radii (4-8px) improve perceived quality
Hard 0px corners look cheap. 4-8px border-radius on cards, inputs, and buttons increases perceived quality with no performance cost.
The / syntax sets elliptical corners
border-radius: 40px / 20px sets horizontal-radius 40px and vertical-radius 20px on all corners. Use this for leaf, arch, or speech-bubble shapes.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.