CSS3 Tour: border-radius
Not interested in the explanation? Head straight to the example page.
Rounded corners ¶
Corners for all ¶
Now you can create rounds corners easily using CSS. There is a bit of variance between browser vendors at the moment but I imagine eventually the syntax will standardise. To add rounded corners you just need:
/* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius: 10px;
And that’s all there is to it. Firefox did have some problems aliasing the corners but this has been fixed now so you can enjoy crisp rounded corners with no effort.
More control ¶
You can even specify which corners have border-radius applied to them. Again the syntax is slightly different between browsers so you’ll need to list both.
/* Gecko browsers */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 20px; /* Webkit browsers */ -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 20px; /* W3C syntax */ border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 20px;
True - this won’t validate with CSS 2.1 validators simply becuase this isn’t CSS 2.1. If you are a validation obsessive then I suggest putting these rules in a separate CSS3 file. If you can’t handle having *any* non-validating code on your site then you’d better wait a bit longer.
Browser support? ¶
Border-radius is supported in Firefox 2 & 3, Safari 3 and related Gecko and Webkit browsers.
Internet Explorer 6 & 7 and 8 (as far as I know) and Opera do not support rounded corners. Instead these users will see a regular corner.
For me this is an example of progressive enhancement. So what are you waiting for?
Can you help make this article better? You can edit it here and send me a pull request.
Page zoom and CSS typography
With most browsers now using Page Zoom rather than just enlarging text is this the end of the road for em based typography?
Preparing for IE7 - Limiting CSS Hacks
Internet Explorer 7 is just around the corner and there have been warnings from Microsoft that existing hacks will break layouts in IE7. By limiting the use of hacks your CSS can be both backwards and forwards compliant.
Goodbye Internet Explorer Hacks (well maybe)
I had to do a template today and I took the opportunity to code using no hacks. With the impending launch of Internet Explorer 7 there are going to be many sites that won't render properly because of existing Internet Explorer hacks.