Home/Design & Color/Border Radius Generator

Border Radius Generator

Visually build and copy CSS border-radius code

Link all corners

Top Left20px

Top Right20px

Bottom Left20px

Bottom Right20px

border-radius: 20px 20px 20px 20px;

What is this tool?

Visually builds a CSS border-radius effect, with the option to link all four corners together or adjust each independently, and generates the corresponding CSS code.

How to use it

Adjust each corner's radius using the sliders, with a live preview showing the result, then copy the generated CSS.

Uneven, independently-set corner radii can create a distinctive "blob" or organic shape effect that's become a popular design trend — worth experimenting with unlinked corners rather than just a uniform rounded rectangle.