Design Grid

First and foremost, before venturing into the world of CSS3. It is imperative that I mention browser support. As I am sure that you have guessed Internet Explorer is the culprit here. While IE 6 & 7 have absolutely no support for CSS3, IE8 does not support CSS3 except for some selectors and some properties that originated at Microsoft to begin with.

Curved Corners

<div style="background-color: #CC8800;
-moz-border-radius: 10px;
-webkit-border-radius: 11px;
border: 3px solid #000;
padding: 15px;">

Individual Curves

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;

To apply the same principle in Safari requires slightly different syntax:

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

That’s all there is to rounded corners using CSS3. It’s worth noting that border-radius is most effective with a lower value e.g 2px.