I am having a hard time understanding Mozilla's explanation of the border radius property when division is involved.
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
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 you were wrong – 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).