Border Radius Generator
Visually design rounded corners for an element, adjusting each corner independently, then copy the resulting CSS border-radius code.
border-radius: 16px 16px 16px 16px;About the Border Radius Generator
A border radius generator lets you visually design rounded corners for an element, adjusting each corner independently, then copy the resulting CSS.
How to use
1
Adjust the radius for each corner using the sliders or input fields.
2
Preview the result on a sample element.
3
Copy the generated CSS border-radius code.
Frequently asked questions
Can each corner have a different radius?
Yes, CSS border-radius supports setting each of the four corners independently, and this tool lets you adjust them individually rather than only uniformly.
How do I create a fully circular element?
Setting a border-radius of 50% on a square element (equal width and height) produces a perfect circle.
Explore more tools in the Developer category.