CSS3 now supports boxes with rounded corners using the border-radius property, This new property is currently supported by Mozila/Firefox, Safari 3, and Google Chrome.

The code for the box above is:

<div style=" background-color: #ccc; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 1px solid #000; padding: 10px;"> <h2 style="text-align: center;">Having a box with rounded corners just got easier.</h2> </div>

The border radius property is expressed as -moz-border-radius: length length and -webkit-border-radius: length length where length is the radii of the corner.  A value of 0 creates a square corner  and the larger the number the greater the curve.  When only one number is expressed the same number is expressed for both the vertical and horizontal radius.  The -moz-border-radius is used for Mozilla/Firefox and -webkit-border-radius is used for webkit based browsers.

The border-radius property of each corner can be set independently by using the following:

-moz-border-radius-topleft / -webkit-border-top-left-radius

-moz-border-radius-topright / -webkit-border-top-right-radius

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Now go have fun making  boxes.