Rounded corners in site design have been very popular over the last few years especially with “web 2.0″ designs. Rounded corners are usually created with images placed in each corner with a a single curved side to give the rounded affect. With CSS3 this all changes, the ability to create rounded corners on a object with a simple property “border-radius” which means no carefully crafted images and hours of trying to get them into the correct place.
But don’t get too excited yet, there are still compatibility issues (the most hated two words by website designers). The problem is CSS3 is a relativity new technology therefore only the latest browsers support it.
Firefox 3+ Supported
Safari 3.1+ Supported
Chrome All Supported
Internet Explorer All Not Supported
Opera All Not Supported
note: Opera 10 will support CSS3
Using the border-radius property ranges from browser to browser. The usage depends on what HTML render engine the browser is using.
-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
Its best just to use all of the properties above when adding rounded corners.
If you have ever used rounded corners in your website leave a comment about how you decided to combat Internet Explorer’s compatibility.
Source: http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/
Related Posts
There are currenlty no related posts
