CSS Border Radius Generator

Visually set border-radius for all four corners or each corner independently. Live preview and copy-ready CSS.

Colors
#0ea5e9
#f1f5f9
Generated CSS
border-radius: 16px;

What is CSS Border Radius Generator?

The CSS Border Radius Generator lets you control the roundness of element corners visually. Choose uniform rounding for all corners, or switch to custom mode to set each corner independently. The live preview updates instantly as you drag the sliders.

How to Use This Tool

  1. Choose Uniform or Custom mode.
  2. Drag the corner sliders to set radius values.
  3. Pick box and background colors.
  4. Copy the border-radius CSS or download the .css file.

Frequently Asked Questions