Border-radius with division

Question

I am having a hard time understanding Mozilla's explanation of the border radius property when division is involved.

Example:

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

I know the first value 10px is the width of the radius and 5% is the height. I don't get how they are affected by the numbers following the /.

One sample: https://jsfiddle.net/wvyesszq/1/

Answer 1

You can give every corner two values (so the maximum are 8 values) which is the radius in two directions (horizontal / vertical).

I think the following pictures explain it perfectly well:

The first set of values define the horizontal radius. And optionally the second set of values, preceded by a ‘/’ (it's not a divison), defines the vertical radius. If only one set of values are supplied, these are used for both the vertical and horizontal radius (what is apparently the reason of the confusion).

So, different from what you assumed – in your example the 10px is the horizontal radius of the top-left-and-bottom-right. And the 5% is the horizontal radius of the top-right-and-bottom-left. And the other four values after '/' are the vertical radii for top-left, top-right, bottom-right and bottom-left.

So remember: On both sites there are shorthands possible (before '/' and after), so you can really have everything between 2 and 8 values).

Check out the documentation of border-radius.