How to use it
- Choose the Unit: px for a fixed radius, or % for a radius that follows the size of the box.
- Type a radius for each corner under Top left, Top right, Bottom right and Bottom left. A corner with 0 is square.
- Tick Elliptical corners (a separate vertical radius) if a corner should be wider than it is tall, and type its vertical radius.
- Copy the CSS declaration and paste it into the rule of your element.
How the four corners are written
The border-radius property takes one to four horizontal radii, in the order top-left, top-right, bottom-right and bottom-left. A list with fewer values repeats the ones it has: with two values, the first is the top-left and bottom-right corners and the second is the top-right and bottom-left corners. A vertical radius is written after a slash, in the same order.
The grammar is set out in the CSS Backgrounds and Borders specification. Each radius is a length or a percentage of the box, and a radius of zero needs no unit.
border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-leftThe shortest form
The tool leaves out every value that the shorthand would repeat anyway. If the bottom-left corner equals the top-right, it is not written; if the bottom-right equals the top-left, the third value goes too. Four equal corners become one value, so 12px 12px 12px 12px is written 12px.
The slash is written only when a vertical radius differs from its horizontal one. Without elliptical corners, each vertical radius equals its horizontal one, so no slash appears.
Worked example: a card with elliptical corners
Set the top-left corner to 40 px by 20 px, the top-right to 20 px by 10 px, the bottom-right to 40 px by 20 px and the bottom-left to 20 px by 10 px. The horizontal radii are 40, 20, 40, 20, which the shorthand writes as 40px 20px. The vertical radii are 20, 10, 20, 10, which it writes as 20px 10px.
The declaration is border-radius: 40px 20px / 20px 10px;, and the preview shows corners that are wider than they are tall.
Frequently asked questions
Why are there two sets of numbers separated by a slash?
The first set gives the horizontal radius of each corner, and the set after the slash gives the vertical radius. Without a slash, a corner is a circle arc with the same radius in both directions.
What does a percentage radius do?
A percentage is taken from the width of the box for the horizontal radius and from its height for the vertical radius. 50 per cent on every corner gives a circle or an ellipse when the box is square or not square.
Why is the order top-left, top-right, bottom-right, bottom-left?
The shorthand follows the clockwise order that the other box properties use, starting at the top left. Once you know that order, the shorter forms with two or three values are easy to read.
Does the tool check the radius against the size of the box?
No. The tool checks only that each radius is a number of zero or more, and that it is within the limit of 1000 px or 100 per cent. If two neighbouring radii add up to more than the side of the box, the browser scales them down.
Is anything I type saved or sent to a server?
No. The preview and the CSS are made in your browser. Nothing is stored or sent to our server, so copy the declaration before you leave the page.
Sources
Figures and text last checked on Tuesday, November 10, 2026.