Border Radius Generator help

Border Radius Generator lets you set the four corners separately and gives you the shortest valid border-radius shorthand, collapsing equal corners automatically.

Steps

  1. Drag each corner slider, or type values.
  2. Switch on elliptical corners for a second radius per corner.
  3. Copy the shorthand.

Common questions

Why is the output shorter than four values?

CSS lets you write one value when all corners match, or two for diagonal pairs. The tool always gives the shortest form.

What is the slash syntax?

border-radius can take horizontal radii, then a slash, then vertical radii, which makes each corner an ellipse rather than a quarter circle.

Can I use percentages?

Yes. Type a value with a percent sign and it is passed through as-is.

Does anything leave my browser?

No. The tool runs entirely on this page.

Everything runs in your browser. Nothing you enter or drop is uploaded.

Back to Border Radius Generator