MODERNWEB

Border Radius

CSS 3’s border radius property is an invaluable tool for web designers. Rather than outputting more images in your layouts, you can create a div with the border radius property to round the corners and therefore be completely flexible.

Important things to know about the border radius property:

• As of this posting, it is not natively supported by all browsers. In order to use it, you must use a vendor prefix. (More on vendor prefixes below)
• You have the ability to specify whether you want the property applied to all of the corners ( border-radius: #; ) or to a specific corner: border-radius-topleft: #px; - border-radius-topright: 3px; - etc
• Border Radius is not supported by IE 8 and earlier. IE 9 does support it.

Vendor Prefixes

If you are new to CSS3, you may have heard this term being thrown around a lot. Vendor prefixes are integral to CSS3 right now. Browsers to not natively support CSS3 and therefore need these prefixes to tell them that the property you are using is a modern web technology. The prefixes are: -webkit (Chrome), -moz (Firefox) and -o (Opera). There are other prefixes that you can use to be safe, but these are the most heavily used browsers.*

One you know that you want to apply your property and you know which prefixes to use, it is just a matter of plugging in the data. 

.divclass{

       border-radius: 6px; 

       -moz-border-radius: 6px;  

       -webkit-border-radius: 6px;

}

The code above will display a div with all of the corners rounded by 6 pixels.

Enjoy!

*More info on prefixes here: http://reference.sitepoint.com/css/vendorspecific