CSS border-radius generator
Set each corner in px, percent or rem to get a short shorthand line and the separate property for each corner.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter top left, top right, bottom right, bottom left and unit.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Order: top-left, top-right, bottom-right, bottom-left. One value if all four match, two if opposite corners match, three if top-right equals bottom-left, otherwise four.
Example
Inputs: Top left = 12, Top right = 12, Bottom right = 12, Bottom left = 12, Unit = px. Result: CSS shorthand: border-radius: 12px;.
Limits and caveats
- It builds circular corners only, not elliptical ones such as 10px / 20px.
- The order is fixed even on right-to-left pages; use border-start-start-radius and friends for direction-aware corners.
Questions about this tool
How do I make a full circle?
Give the element equal width and height and use border-radius: 50%.
How do I make a pill button?
Use a large value such as 9999px, and each end becomes half the button height.
Why do I sometimes get only two values?
Opposite corners match, so 10px 0 means top-left and bottom-right are 10px and the other two are 0.