I recently discovered a javascript library named CSS3 PIE. PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. The list currently includes border-radius, box-shadow, border-image, multiple background images, and linear-gradient as background image. The property that interests me most though is border-radius, since I hate having to create new images every time I want rounded corners with a different radius.
To get started with PIE download the files from their website (css3pie.com). The download includes multiple files but in most cases all you really need is the PIE.htc file. Copy the PIE.htc file into your web project and then reference it using the CSS behavior property. The behavior property is proprietary to Internet Explorer so all other browsers will ignore it. PIE uses the standard CSS3 border-radius property so you will need to add that too, as well as the -moz and -webkit versions for Firefox, Chrome, and Safari. Below is an example:
<html>
<head>
<style>
.rounded
{
behavior: url(pie.htc);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="rounded">
TESTING
</div>
</body>
</html>
After adding PIE you should have CSS3 decoration support for all the major browsers with the exception of Opera although personally I never really consider Opera much anyways.
Note: I've noticed that PIE's rendering of rounded corners is quite slow in Internet Explorer. Because of this, I've decided NOT to use PIE on my blog, so anyone who is unfortunate enough to use Internet Explorer version 8 or lower will see squared corners instead of rounded corners. Upgrade your browser or switch to a better one.
