Border Radius Preview

Design border-radius visually — four corner sliders, live preview and shorthand CSS output.

Top-left: 20px Top-right: 20px Bottom-right: 20px Bottom-left: 20px

border-radius: …

How to use

Drag the four corner sliders, preview the shape live, and copy the border-radius CSS.

Can I set each corner separately?

Yes — four sliders control top-left, top-right, bottom-right and bottom-left.

Does it output shorthand?

The compact 4-value shorthand is generated, ready to paste.

☕

Every tool runs 100% in your browser — no uploads, no signups. If a tool saved you time, consider supporting us with a small donation.