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.
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.
The code above will display a div with all of the corners rounded by 6 pixels.
*More info on prefixes here: http://reference.sitepoint.com/css/vendorspecific
- cssthree posted this