IE9 will support border-radius natively (yay!), but that still leaves all those users with an earlier version of IE in a world filled with dangerous sharp corners and no relief in sight. There are a ludicrous number of different scripts that have been created to try to solve this problem, but each and every one has one (or often several) of these fatal flaws:
- Requires style information to be resupplied in JavaScript
- Generates a huge number of DOM elements
- Creates corners that are not anti-aliased
- Unmaintainable, unreadable, or just plain bad code
- Inadequate documentation
- Requires additional plugins or images
- Breaks support for background-image/background-repeat
- Breaks direct descendant selectors
- Breaks in IE8
- Causes severe memory leaks due to circular references
So, I decided to come up with something better. RoundRect is a new, MIT licensed library (based loosely on the DD_roundies 0.0.2a source) that uses VML to provide a zero-configuration, nearly-fully-featured implementation of border-radius in IE. It still has some rough edges and comes with its own list of caveats (check the link for more info), but it does more, works better, and is better written than any other library that I’ve come across for creating round rectangles in IE. Check it out!
Update 2011-03-01: Use CSS3 PIE unless you have very specific requirements.
Comment #16
Thank you for the sharing.
Comment #17
Gah! Our Drupal install only has the drupal6-standard JQuery v1.2 and the boss won't let us upgrade it in case it breaks something. So I can't use your script. :-(
In fact I had already been playing with VML roundrect in a HTC file as a solution to this same problem, but it seems to break in some very inconsistent ways. One instance of IE8 (my dev box) would display it fine, but when I published it, the same code rendered with the VML boxes invisible. It has been a very frustrating experience. Any tips?
Comment #18
I've been wondering when someone was going to get around to using VML to round corners. Anyways, my hat is off to you for making it work!
Comment #19
@Spudley: Sorry about the jQuery dependencies. They’ll go away in not too long, I promise. Keep an eye on the github. I intentionally eschewed the jQuery event system to make it easier to get rid of the dependencies, but at the same time, it was quicker to get something up and working that didn’t leak like a sieve by using some of its functions instead of decoupling them from the rest of jQuery.
@Evan: Not the first to use VML (DD_roundies and a couple of the other ones use VML too), but it is hopefully the best and will only continue to improve.
Comment #20
What about IE6?
Comment #39
Tested this in IE6 just now. Works great!