Rounded corners is something new in CSS3, therefore we have some compatibility issues especially with Internet Explorer up to version 8. But of course there are ways around so you don’t have to use images everywhere you want a round corner.
How it works
They can be created independently using the four border-*-radius properties or all simultaneously using the border-radius shorthand property.
Lets look at the individual border-*-radius properties
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-left-radius
- border-top-right-radius
The syntax:
border-*-*-radius: [ | ] [ | ] |
Quick example
border-top-left-radius: 1em 2em; border-bottom-right-radius: 15% 5%; border-top-right-radius: 3em; |
Result:
Notes
Where two values are supplied, the first value define the horizontal radius and second the vertical radius of a quarter ellipse. If only one supplied both horizontal and vertical are defined equally which makes a quarterly round corner.
If either value is 0 the corner will not be rounded.
Cross browser compatibility
Opera, Safari, Chrome and new versions of Firefox all supports the W3C specification border-radius, although there are some bugs when using percentage as length.
The -moz prefix
Firefox has supported rounded corners since version 1 with one value only and from version 3.5 two values can be defined.
-moz-border-radius: 1em; -moz-border-radius-topleft: 1em; -moz-border-radius-topright: 1em; -moz-border-radius-bottomright: 1em; -moz-border-radius-bottomleft: 1em; |
The -webkit prefix
This is mainly for older Saferi broswers
-webkit-border-radius: 1em; -webkit-border-bottom-left-radius: 1em; -webkit-border-bottom-right-radius: 1em; -webkit-border-top-left-radius: 1em; -webkit-border-top-right-radius: 1em; |
The -o, -icab and -khtml prefix
These has never been supported and I’ve seen many developers go berserk with various definitions but none of these are ever needed.
Early IE support
Start with downloading border-radius.htc and put it somewhere on your site.
Then add following line to your stylesheet
.round-corners { behavior: url(http://yoursite.com/border-radius.htc); } |
And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc file.
Put it separated from other browsers no need to load any extra when you don’t needed it
Easy Starter CSS Templates
Web design has never been easier with these static, Html/css templates. Choose between two or three column and select from over 50 high-res headers and 70 custom backgrounds. Read more
