A surprising but confusing CSS3 feature is border-radius. Confusing, for among others it is not working in MIE and Opera, but it also is different implemented (the support, that is) by the Mozilla/Firefox and Safari browsers:

The W3C: “The two length values of the ‘border-*-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge “. (I cannot formulate that more properly!)

So every corner is to be defined on its own, where border-radius is a shorthand:

border-top-left-radius: 10px 20px;
border-top-right-radius: 1em 2em;
border-bottom-right-radius: 5px;
border-bottom-left-radius: .5em;

Safari (and Google Chrome):

They accept the two values (where the rendering in Chrome looks really ugly!):

-webkit-border-radius: value (value);

-webkit-border-top-left-radius: 10px 20px;
-webkit-border-top-right-radius: 1em 2em;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: .5em;

Mozilla/Firefox:

They accept only one value (and allowing therefore only regular corners):

-moz-border-radius: value;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: .5em;

Safe to Use (seems to be):

-moz-border-radius: 1em; (Mozilla)
-webkit-border-radius: 1em; (Safari)

Border-Radius in Mozilla/Safari (my example):

Used here are:
Sidebar Title: border-radius: 5px;
Box: border-radius: 10px;

Border-Radius in MIE (the same example):