Can I use a unit other than pixels?

This tool generates px values; swap the unit in your own stylesheet afterward if you need rem, %, or another unit.

Does a large radius make a fully round shape?

Yes — a radius at least half the element's smaller dimension produces a fully rounded end (a pill shape on a rectangle, a circle on a square).

All tools

Converters

Border Radius Generator

Live-preview CSS border-radius, per-corner or all at once, ready to copy.

🔒 Runs entirely in your browser — nothing here is ever uploaded

Remove ads →

About the Border Radius Generator

Builds a CSS border-radius value with a live preview — all corners at once or each corner set separately — and copies the ready-to-use CSS rule.

100% Free Runs in Your Browser No Sign-Up Required

How to use it

Choose whether all corners share one radius, or set each corner separately.
Enter the radius value(s) in pixels.
Copy the generated CSS rule.

Formula

border-radius shorthand order is top-left, top-right, bottom-right, bottom-left.

Worked example

Setting all corners to 12px generates border-radius: 12px 12px 12px 12px;

Interpreting your result

Per-corner mode uses the exact CSS shorthand argument order — copying it directly into your stylesheet reproduces the same rounding shown in the preview.

Frequently asked questions

Top-left, top-right, bottom-right, bottom-left — the standard CSS border-radius shorthand order.