CSS Border Radius Generator
Adjust the four corner radii separately and copy the resulting CSS.
Live preview
How to use
Set the top-left, top-right, bottom-right and bottom-left radii.
The preview and code update as you edit.
Copy the code or save it as a file.
FAQ
What rules does this tool use?
The CSS values follow clockwise order, starting at the top-left corner.
What are the limits?
Values are pixels. CSS may proportionally reduce radii if adjacent corners would overlap.
Are my inputs uploaded?
Tool inputs are processed in your browser. Advertising makes separate requests as described in the privacy policy.