CSS Border Radius Generator
Round each corner independently with live controls and a real-time preview, then copy clean border-radius CSS. Includes elliptical corners and handy presets.
border-radius: 16px;
FAQ
Can I round each corner differently?
Yes. Switch from Linked to Per corner and each slider controls one corner. The tool writes the shorthand in top-left, top-right, bottom-right, bottom-left order.
How do I make a pill or circle shape?
Use the Pill preset, or set every corner to a large value. A fully rounded pill uses a radius larger than half the element's height; a perfect circle needs a square element with a 50% radius.
Is the generated CSS production-ready?
Yes. It collapses to a single value when all corners match, and falls back to the four-value shorthand when they differ. Paste it straight into your stylesheet or a Tailwind arbitrary value.
Now design the whole app.
Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.
Try Bender free