Robert Rocha Robert Rocha - 7 months ago 51
CSS Question

Border-radius with division

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;

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

One sample:


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:

enter image description here

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).