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:

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

  1. cssthree posted this