UtilityGrid
🔍

How to Use CSS Border Radius Generator

Dial in rounded corners with per-corner sliders and a live preview, then copy the border-radius CSS.

Open the CSS Border Radius Generator tool →

What is CSS Border Radius Generator?

Visually craft border-radius (per-corner) and copy the CSS. It's completely free, needs no sign-up, and runs entirely in your browser — so it's fast and private.

How to use CSS Border Radius Generator

  1. Open the CSS Border Radius Generator tool.
  2. Paste or type your input.
  3. Set any options provided.
  4. Copy the result. Everything runs in your browser — nothing is uploaded.

Frequently asked questions

Can I set each corner independently?

Yes — control all four corners individually and watch the shape update live.

How do I make a circle or pill shape?

Use large or percentage radii. 50% on every corner of a square makes a circle, and a large radius on a wide box makes a pill.

Does it output plain CSS?

Yes — copy the border-radius value straight into your stylesheet.

More Developer Tools