One of the common features of web design in the 1990s were boxes with rounded corners floating over beautifully designed backgrounds. The sites looked nice, but you had to use some trickery to get the look you wanted. Rounded edges on anything required images, usually held in place by table cells.
Well, folks, we are now a decade into the 21st century, and some browsers that shall remain nameless are just now getting caught up on HTML and CSS standards. With those standards come new goodies that make it easier to display divs rounded edges.
To achieve rounded corners, you can use the CSS3 border-radius property. A quick and simple example is:
Additionally, Firefox requires a -moz prefix in order for the property to work. Therefore, your final code will look like:
This should work in Firefox, Safari, Google Chrome, Opera, and the future Internet Explorer, version 9. Unfortunately, if you want current IE users to see your cool effects, you will still have to use an alternative method for them.
For a more comprehensive border-radius explanation, including several examples, visit CSS3.Info.