Border Radius Generator

Create custom border-radius shapes with visual preview

Live preview of your border radius

Presets

Adjust border radius values

Link all corners

All Corners20px

Background Color

Border Color

Border Width0px

Generated CSS

border-radius: 20px;
background-color: #3B82F6;

1. Use the sliders to adjust corner radius values

2. Uncheck "Link all corners" to control each corner independently

3. Choose preset shapes for quick styling

4. Customize background and border colors

5. Copy the generated CSS code to use in your project