CSS border radius generator
Drag the sliders for the four corners, keep them linked or set them apart, and switch on elliptical corners for blob-like shapes. The CSS is shortened for you.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose px or %.
- With Link all corners on, one slider moves all four. Turn it off to set each corner separately.
- Turn on Elliptical corners to get a second slider for the vertical radius of each corner.
- Press Copy and paste the rule.
What the output means
border-radius: 24px; rounds all four corners with a 24px radius. border-radius: 10px 20px; rounds the top-left and bottom-right corners by 10px and the other two by 20px. border-radius: 50% / 25%; gives elliptical corners.
Example
A pill-shaped button: set px, link the corners and drag to the maximum (200px); the browser limits the radius to half the height.
Tips
- For a perfect circle, use a square box and
border-radius: 50%.
- Setting only some corners to 0 gives tabs and speech-bubble shapes.
- Maximum slider values are 200px or 100%.
Frequently asked questions
What is the order of the four values?
Top left, top right, bottom right, bottom left, clockwise from the top left. The tool shortens the list when values repeat: four equal values become one, and top-left equal to bottom-right with top-right equal to bottom-left becomes two.
What does the slash mean?
In elliptical mode the radius has a horizontal and a vertical part, written as horizontal / vertical. For example 50% / 25% makes each corner an ellipse that is half as tall as it is wide. If both parts are equal the slash is left out.
Should I use px or percent?
Pixels keep the same corner size whatever the box size. Percentages scale with the box, so 50% on a square gives a circle and on a rectangle gives an ellipse.
What happens if the radii are bigger than the box?
Browsers scale all radii down by the same factor until adjacent corners no longer overlap, so large values will not break the shape.