CSS Border Radius Generator — Free Online Tool

About the CSS Border Radius Generator

Adjust each corner radius with sliders and see exactly what the CSS looks like on a live preview box.

Everything runs in your browser — nothing is uploaded.

How to use the CSS Border Radius Generator

Step 1Type or paste your input.
Step 2The output updates live as you type.
Step 3Copy or download the result when ready.

When people reach for this tool

Reproduce the corner radii from a screenshot

One value per corner makes it obvious which corners are rounded.

Find where the rounding goes wrong

A large radius on a small element looks like a bug, and the preview shows it.

Pick radii that look related across a component set

Establishing one or two values keeps buttons, cards and inputs coherent.

Practical tips

A radius larger than half the shortest side makes corners overlap and the shape turns into a pill or a circle.
Use the shorthand for equal corners. Setting four values when one would do is a common source of unnecessary CSS.

What you get

Live results while you type
Runs entirely in your browser
Copy and download with one click

CSS Border Radius Generator — FAQ

Can I use percentages?

The generator outputs px values, but you can change them to % in the CSS anytime.

Why does my element look like a pill?

The radius has reached half the shorter side, at which point the corners meet and the shape becomes fully rounded.

Should every corner be the same?

Not always. Mixing one large corner with smaller ones is a deliberate and popular style, but it works best when the asymmetry is intentional rather than accidental.