CSS Border Radius Generator

What this tool does

border-radius looks like one number until three corners have to differ, and then the shorthand catches people out: the four values run clockwise from the top left, and the slash form gives every corner a horizontal radius before the slash and a vertical one after it. That second form is what draws the soft, asymmetric shapes that read as organic rather than as a rounded box. Here you get a slider per corner, a real element with the value applied rather than a picture of one, and output collapsed the way a person would write it, so four equal corners come out as a single value instead of four.

How to use it

1. Choose the unit and unlink the corners if you want them to differ.
2. Drag each corner until the preview looks right.
3. Turn on elliptical corners for blob shapes, then copy the declaration.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

What does the slash in the value mean?

Everything before the slash is the horizontal radius of each corner, everything after it the vertical radius. Different values on either side make an ellipse instead of a quarter circle.

Should I use percentages or pixels?

Pixels keep the same curve at every size, which is what buttons and cards usually want. Percentages scale with the element, so 50 percent on a square gives a circle.

Why is my output shorter than four values?

CSS collapses repeated corners, and so does this tool: four equal corners are one value, and a matching diagonal pair is two. The result is identical, just shorter.