Rounded Corners With CSS3
Border-Radius Property

This one's pretty simple: just add the border-radius property, with the value of your choice, to the element of your choice.

Here I've added them to the content div.

Note that I've used three different properties: one for older Mozilla-based browsers, one for older Webkit-based browers, and the actual non-proprietary CSS3 property "border-radius" for that shiny day in the future when this CSS3 property will be supported by all browsers.

Note that the official CSS3 border-radius property goes last in our code: the vendor-specific code comes before it.

This method won't work at all in IE8 and below. But since browsers just ignore CSS rules they don't understand, your IE users will simply see square corners.

This method also won't fully validate, since it uses proprietary code for specific browsers. Instead, you'll get two warnings that say:

• Property -moz-border-radius is an unknown vendor extension
• Property -webkit-border-radius is an unknown vendor extension

So, be very careful when reading your validation error messages, to be sure you don't have any real CSS errors mixed in with the acceptable ones.