How do I use the Border Radius Generator?

Drag the sliders to set the radius for each corner (top-left, top-right, bottom-right, bottom-left). Toggle "Link all corners" to adjust all four corners simultaneously or independently. Customize the preview shape dimensions and colors, then copy the CSS code.

Is the Border Radius Generator free?

Yes, the Border Radius Generator is completely free. It runs entirely in your browser with no signup, no download, and no data sent to any server.

⬜

css

Border Radius Generator

Visual border-radius editor with live preview. Adjust each corner independently or link them together. Export CSS with one click.

border radius generatorcss border radiusrounded cornerscss radius toolcorner radiusborder radius preview

Link all corners

Top-Left20px Top-Right20px Bottom-Right20px Bottom-Left20px

Width Height Background Border Color Border Width

CSS Code

How to use

How to Use the Border Radius Generator

1 Drag the sliders to set the radius for each corner (top-left, top-right, bottom-right, bottom-left).
2 Toggle "Link all corners" to adjust all four corners simultaneously or independently.
3 Customize the preview shape dimensions and colors, then copy the CSS code.

Border radius is one of the most commonly used CSS properties for creating rounded corners, pills, circles, and organic shapes. This tool gives you instant visual feedback.

Try the presets for common shapes like circles, leaves, and blobs. Each corner can be set independently to create unique asymmetric designs for cards, buttons, and containers.

More Css tools