One of the most annoying things about Internet Explorer is it's lack of support for ALL CSS3 properties (and of course it's failure to even fully support CSS2). CSS3 makes rounded corners possible using only CSS and currently only Firefox and Safari support them. With IE's market share still in the 70% range it's hard to design a site without ensuring it looks good in IE.
One of my favorite properties in CSS3 is the border-radius property. With this web designers can finally close down Photoshop and spend more time writing CSS. The biggest problem is Internet Explorer 6 and 7 do not support the border-radius property.
Drew Diller to the Rescue
Fortunately a guy by the name of Drew Diller came up with a solution using IE's proprietary VML feature to emulate the CSS3 border-radius property and at the same time he also writes out the necessary code to make border-radius work in compliant browsers.
<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
/* IE only */
DD_roundies.addRule('.roundify', '10px');
/* varying radii, IE only */
DD_roundies.addRule('.something_else', '10px 4px');
/* varying radii, "all" browsers */
DD_roundies.addRule('.yet_another', '5px', true);
</script>
CSS3 Rounded Borders in Non-IE Browsers
For browsers other than IE if you included a value of "true" in the third parameter of the function call it will also write out the necessary CSS for Firefox, Safari and the vanilla border-radius property like so:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
Transparent PNG In Internet Explorer With background-repeat and background-position
Another extremely exciting feature of Drew's is that this inadvertently fixes PNGs in IE with a transparent background. Unlike ALL other PNG fixing solutions out there Drew's solution also allows for the background-repeat and background-position properties to work. This has caused me to go back and review many of my designs I've done and question whether I should re-code them using Drew's new fix. To fix PNGs use the code below:
DD_roundies.addRule('.your .example img');
Props
Make sure to check out Drew's website for more information on this:
