Border Radius Generator

Create CSS border radius visually

💡 Drag corner handles to adjust radius visually

Link corners

Unit

Color

Size: 200px

Top Left

Top Right

Bottom Left

Bottom Right

Shortcuts: Ctrl/Cmd + Shift + C copy CSS, Ctrl/Cmd + Shift + R reset, Ctrl/Cmd + Backspace reset.

border-radius: 16px;

rounded-2xl

Tailwind classes are approximate; values are rounded to the nearest scale.

border-radius: 10px;

All corners equal

border-radius: 10px 20px;

Top-left/bottom-right, top-right/bottom-left

border-radius: 10px 20px 30px;

Top-left, top-right/bottom-left, bottom-right

border-radius: 10px 20px 30px 40px;

Top-left, top-right, bottom-right, bottom-left