css3

CSS3 Basics – Rounded Corners

Aaaah, rounded corners. One of those design elements that’s subtle and classy… but that used to mean running to Illustrator or Photoshop to generate, slice, optimize, and export images, merge them into a sprite and then finally place them into their containing elements with a careful juggling of x and y coordinates. Oh how glorious that this time robbing sequence of events is so close to being a complete thing of the clumsy ol’ past!

With CSS3 support in modern browsers spreading like wildfire, visual embellishments that we know and love are now ever more accessible to our sites with a few simple declarations added to our stylesheets. Best of all browsers that don’t yet support any given CSS3 styles will just ignore them allowing a well designed site to degrade gracefully and without hiccups when viewed in older browsers.

Getting Started

I’ll kick off this series of CSS3 examinations with a simple application of the aforementioned rounded corners. Any element can have this rule applied with a set of variables allowing you to fine tune it to your needs. We’ll start by examining the code in it’s simplest CSS3 form:

.rounded {
border-radius: 15px;
}

What this example does is apply a 15 pixel radius rounding to all four corners of the element. Someday in the near future when work on the CSS3 specifications are declared officially complete, this will work for all major browsers. Until then each browser has made there best attempt to interpret how the W3C’s recommendations will finish up, leaving little differences in how each responds and renders (at least in theory!) To deal with this we have prefixes for each major rendering engine to help us alter them individually if necessary to attain a unified rendering across browsers. The three major extensions declared along with our original future-proof declaration look like this:

.rounded {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
}

The -moz- extension covers mozilla based browsers such as Firefox, -webkit- covers Safari and Chrome, and -khtml- covers Konquerer (Linux). The pure un-prefixed line of code will render in Opera 10.5 or later and IE 9, so that covers all of our considered bases, other then IE6 – IE8… who of course don’t play nice.

A Hack for Rounded Corners in IE 8 and Below

While IE9 supports CSS3 and the border-radius declaration (yay, Microsoft is finally allowing IE to play in the yard with the other kids… at least every once in a while!) we still have IE8 and lower left out of the fun. Not a single CSS3 rule is implemented in IE8 or IE7 (and IE6 can’t even render containers right!), but there is a hack to achieve a similar result in those browsers. Start by downloading this .htc script form the google code repository: Curved Corners. Upload it to your server then apply this style:

.rounded {
    behavior: url(absolute-path-to-file/border-radius.htc);
    border-radius: 15px;
}

Notice I refer to an absolute path to the script in the url attribute. This is because unlike images which are referenced in a css file relative to the css file itself, in this case we need to reference relative to the page calling the css file… so the absolute path is safest. Some other things to keep in mind when using this method are to not combine it with any other IE filter hacks, to make sure the element hasLayout (such as zoom:1;) and that it has position (if it doesn’t already just add position:relative;). Having said all that, it’s still not a perfect solution. It can be buggy and a pain to get working just right (issues like disappearing backgrounds, not working on nested divs, etc are common) but such is the bane of anyone trying to make things work right in IE! There are some other .htc scripts to try such as css3pie, and a javascript solution as well to look into if you don’t mind the extra code bloat.

Where To Go From Here?

So there we have it… 15 pixel radius rounded corners on our element. Now of course we can make the radius of the corners any size we want… but not only that, we’re not stuck with having the rounding on all four corners if we don’t want, either. In fact, we can pick and choose which corners we want rounded, choose different size radii for each corner independently, and even create ellipses instead of perfectly rounded corners. All that and more will be covered in a coming post on advanced CSS3 rounded corner techniques… Get ready for it!

For now have fun playing and getting familiar with the basic implementation of the border-radius style, and happy coding!

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *