CSS Border Radius Generator

Drag the sliders to set each corner radius independently. The live preview updates instantly — copy the CSS when you're happy.

Link all corners

Top-Left 20px

Top-Right 20px

Bottom-Right 20px

Bottom-Left 20px

CSS output

Runs entirely in your browser. Nothing is uploaded.

How it works

STEP 1

Use the four sliders to adjust top-left, top-right, bottom-right, and bottom-left radius values independently.

STEP 2

The preview box updates in real time so you can see exactly how the rounded corners will look.

STEP 3

Click "Copy CSS" to copy the border-radius declaration to your clipboard, ready to paste into your stylesheet.