Border Radius Generator
Visually build and copy CSS border-radius code
Files never stored
20px
20px
20px
20px
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.
Watch: Border Radius Generator in Action
Watch on YouTubePlays on YouTube (counts toward our @freedailypro channel).
Frequently asked questions
More from Design & Color: