One of the coolest new additions to the CSS3 specification is its built-in ability to render rounded corners. Before CSS3 the only semi-humane way to create rounded corners on an element was to create four rounded corner images and use some unwieldy albeit effective display:absolute positioning to get the desired effect. This resulted in bloated code that contained numerous extra <div> tags such as: <div class=“topLeftCorner”></div> to create the effect, and ultimately bogged down the rendering of the page.
This onerous task has been thankfully and mercifully banished to the days of yore thanks to CSS3’s border-radius. To create a rounded-border with CSS3 it is as simple as typing:
.rounder_corners {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
Now this is all well and good however the bane of every accomplished web developer is cross-platform compatibility - namely Internet Explorer. Unfortunately for all who code for the web most of the world still uses IE7 and IE8 as their web browser of choice. What’s so horrible about this? IE6-8 does not suport CSS3’s border-radius property, thus insuring that any IE6-8 user will not see your beautifully rounded corners. I’m choking up just thinking about the ugly pain. :(
So what’s a web developer to do? Today I stumbled across (through html5boilerplate.com) the most excellent and amazing CSS3 PIE resource. PIE stands for Progressive Internet Explorer and the long and short of its awesomeness is that when it is included on your web page it equips every user running IE6-8 with the ability to render and display all the glorious benefits of CSS3 - including its border-radius property! Ugliness undone!