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:
- 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.