Skip to main content

Border Radius Generator

Create custom border-radius shapes with visual preview

Preview

Live preview of your border radius

Settings

Adjust border radius values

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

How to Use

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