Round all corners at once or one by one, in px or %, with optional elliptical corners. Runs on your device.
The border-radius shorthand takes up to four values, in the order top-left, top-right, bottom-right, bottom-left, going clockwise from the top-left corner. One value rounds every corner. Two values are top-left and bottom-right first, then top-right and bottom-left. Three values are top-left, then top-right and bottom-left together, then bottom-right. Four values set each corner. The page always writes the shortest of these that says the same thing: 40px 10px 40px 10px becomes 40px 10px, and 5px 8px 5px 8px becomes 5px 8px. A radius of 0 is written as 0 with no unit.
In px the radius is a fixed length, from 0 to 1,000. In % it is a share of the box: the horizontal radius is a share of the width and the vertical radius a share of the height. Percent runs from 0 to 100 here, and 50% on a square box makes a circle. On a wide box 50% makes an ellipse, which is why a pill shape is better made with a large px value such as 999px. If the radii on one side add up to more than that side, the browser scales all the radii down by the same factor, so a big number never breaks the box. The preview box is 200 by 130 px.
A normal corner is a quarter of a circle. An elliptical corner has two radii: one across and one down. Turn on the advanced switch to see the second box, Vertical radius, or four vertical boxes when you set each corner. The CSS then has a slash: the horizontal radii come first, then a slash, then the vertical radii, as in 24px / 12px. Each side of the slash is shortened on its own. If every vertical radius equals the horizontal one, the slash part is left out, since it would say nothing new.
It writes the border-radius shorthand only. It does not write the four longhand properties such as border-top-left-radius, and it does not mix units in one rule: the unit you pick applies to every number. Nothing you type is stored or sent; the page works out the rule in your browser. The first box is Radius when all corners are the same, or four named boxes for each corner. A value that is empty, negative or too large for the unit shows a message under the field and hides the CSS.
Top-left, top-right, bottom-right, bottom-left, clockwise from the top-left. The page writes this order for you and shortens it when corners match, so 40px 10px 40px 10px is written as 40px 10px.
Use a square box and set the radius to 50%. On a box that is not square, 50% gives an ellipse. For a pill-shaped button, use a large px value instead, such as 999px, because the browser scales it down to half the height.
It separates the horizontal radii from the vertical radii, so each corner can be an ellipse. 24px / 12px makes every corner 24 px across and 12 px down. Without a slash, the horizontal and vertical radius of a corner are the same.
When the radii on one side add up to more than the side, the browser scales them all down, so on a square box a value past 50% on every corner changes nothing more. The page limits % to 0 to 100 so the numbers you copy stay meaningful. In px the limit is 1,000.
No, only the shorthand border-radius. The shorthand covers the same four corners in one line, and the page shows the corner names in the preview description.