However, it’s not all that bad. As border-radius.com would have you believe, the syntax to create an element with top–left and bottom–right corners with a 50px round, and top–right and bottom–left corners with 10px rounds would be:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 50px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;

Wrong, you can actually use the border-radius shorthand to nail this in three lines:

-moz-border-radius:50px 10px 50px 10px;
-webkit-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;

The sytanx follows the following rule: border-radius:top–left top–right bottom–right bottom–left;. I’ve tested this in Firefox (-moz-border-radius), Webkit (-webkit-border-radius) and Opera (border-radius) and it works just fine.

Addendum

You’d think Webkit would just be Webkit, right? Wrong. This works in Chrome but not Safari. I’ve had reports that Safari 4.0.4 (I guess it’s not found it, get it? Oh never mind.) doesn’t work. Useful…

Still, this version will work, and is still considerably shorter:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;