Property Reference - CSS Reference - page 140

.callout {border-radius: 10px / 20px;}
That will cause each of the four corners' rounding to be 10 pixels across and 20 pixels tall.
This extends out to setting the four corners uniquely, like so:
.callout {border-radius: 10px 20px 30px 40px /
1em 2em 3em 4em;}
This is equivalent to declaring:
.callout {border-top-left-radius: 10px 1em;
border-top-right-radius: 20px 2em;
border-bottom-right-radius: 30px 3em;
border-bottom-left-radius: 40px 4em;}
Using fewer than four values causes the supplied values to be repeated in the familiar
pattern (see margin, padding, etc.) but with a slight offset. Rather than being Top-Right-
Bottom-Left (TRBL, or “trouble”), the pattern is TopLeft-TopRight-BottomRight-BottomLeft
(TLTRBRBL, or “tilter burble”). Otherwise, the repeat pattern is the same: 1em is the same as
1em 1em 1em 1em , 1em 2em is the same as 1em 2em 1em 2em , and so on. Thus, there can be
differing numbers of values to either side of the slash, as the following two declarations are
equivalent:
.callout {border-radius: 2em 3em 4em / 5%;}
.callout {border-radius: 2em 3em 4em 3em / 5% 5% 5% 5%;}
Percentages, when used, are calculated with respect to the size of the element's border box
(the box defined by the outer edges of the element's border area) dimension on the related ax-
is. Thus, in the previous declarations, the 5% values are calculated to be 5% of the height of
the element's border box because values after the slash define vertical radii. Any percentages
used before the slash are calculated as percentages of the width of the element's border box.
Examples:
a[href] {border-radius: 0.5em 50%;}
.callout {
border-radius: 10px 20px 30px 40px /
1em 2em 3em 4em;}