How to use the css border radius generator
- Start from a preset, or edit the four corners directly. Each corner has a horizontal radius and a unit of px or %.
- Leave Link all corners on to change every corner at once, or turn it off to set each corner on its own.
- Turn on Elliptical corners to give each corner a separate vertical radius. The vertical boxes then appear.
- Check the live preview, switch between the wide and square box, and press Copy CSS to copy the finished declaration.
Worked example
Four corners of 10px give border-radius: 10px;. If the top left and bottom right are 10px and the other two are 20px, the shorthand is 10px 20px. The classic blob uses elliptical percentages and comes out as 60% 40% 30% 70% / 60% 30% 70% 40%, where the values before the slash are horizontal radii and the values after it are vertical radii.
How the shorthand is reduced
The corners are read in the order top left, top right, bottom right, bottom left. CSS lets you write one, two, three or four values. One value means all four corners match. Two values mean top left and bottom right match, and top right and bottom left match. Three values mean top right and bottom left match. The tool always picks the shortest form that means the same thing.
With elliptical corners, CSS writes the horizontal radii, then a slash, then the vertical radii. When the two sets are equal the slash is left out, and each side of the slash is reduced separately.
Pixels, percentages and big values
A radius in px is a fixed length. A percentage refers to the size of the box: horizontal radii use the width and vertical radii use the height. That is why 50% on a square box makes a circle and on a wide box makes an ellipse. A very large px value such as 999px gives a pill shape on a wide box, because when the radii on one side add up to more than the side, browsers scale all radii down by the same factor.
Values are rounded to two decimals, and 0 is written without a unit. Percentages above 100 and pixel values above 10,000 are rejected so the output is always sensible.
Preview and limits
The preview is a box that shrinks to fit narrow screens, so it never forces the page to scroll sideways. The preview color and box size do not appear in the CSS, only the radius does. To add depth to the same box, try the box shadow generator, and for a background, the CSS gradient generator. Everything runs in your browser.
Assumptions and limits
- The output is the border-radius property alone. It does not include width, height, color or any vendor prefix.
- The preview uses the same value as the CSS, but different box sizes can look different because percentages depend on the box.
- The presets are example shapes to start from, not recommended values.
- Each radius is limited to 100 percent or 10,000 pixels.
Frequently asked questions
How do I make a perfect circle with CSS?
Use a box with equal width and height and set every corner to 50%. On a box that is not square the same value gives an ellipse, so check the square preview.
What does the slash in border-radius mean?
It separates horizontal radii from vertical radii. The values before the slash set how far each corner curve runs along the top and bottom, and the values after it set how far it runs along the sides.
Why does a huge pixel value still look fine?
When the radii along one side add up to more than that side, browsers shrink all radii by the same ratio so the curves just fit. That is why a value like 999px gives a pill shape.
Can I mix px and % in one declaration?
Yes. Each corner has its own unit. If values in a group differ in unit, the shorthand cannot merge them, so the output lists them separately.