Rounded Corners in Internet Explorer

You may remember my recent expirement with getting rounded corners in Internet Explorer to work with VML. I tried to come up with a way to mimic border-radius and to be able to implement simple rounded corners into a design.

The first implementation I saw that tried to do this in a seamless way was Remiz of HTML Remix. The implementation uses an HTML control (ie: an htc file) that can be easily bound to any element which should have rounded corners.

Drew Diller has pointed me to his implementation, DD_roundies, which he has just released. His code has the added benefit of allowing tiled alpha PNGs without using AlphaImageLoader (an unexpected discovery).

Here's hoping, once again, that IE8 will magically support border-radius.

Published December 03, 2008
Categorized as HTML and CSS
Short URL: http://snook.ca/s/920

Conversation

15 Comments · RSS feed
Tim Wright said on December 03, 2008

Here's to hoping IE8-final doesn't suck as much as IE8-Beta2

Marin said on December 03, 2008

This htc can be handy too
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

Travis Gertz said on December 03, 2008

Heard it from the horses mouth at our last Democamp in Calgary. IE8 will have no CSS3 support at all.

It's pretty disappointing that after all this time MS is still working on "perfecting" their CSS2 support before even looking at CSS3.

Jonathan Snook said on December 03, 2008

@Marin: Um, that's the second link I have in the article.

@Travis: Yeah, I keep hearing the same thing. I just keep hoping for a surprise each time a beta gets released.

Ryan Wilke said on December 03, 2008

Maybe it's time for them to adopt Webkit. Nah, that would be far too convenient for us :)

robert said on December 03, 2008

Until Microsoft provides an auto update mechanism for their browsers like everyone else does, we will always be stuck without border-radius at least in some respect.

I'm hoping Microsoft adds that to IE8 as well as all the other updates we need.

Chris Lienert said on December 03, 2008

@Robert: there's no reason why you can't add rounded corners to your site now - progressive enhancement seems to be the nom de jour for such things. Your site will look great in Safari and Firefox 3 and slightly less so in other clients.

As for rolling out IE updates, the IE team doesn't quite know what to do. Apparently they copped a lot of flak from customers after making IE7 a high priority update and, while they want IE8 out there as quickly as we do, there's really no nice way of getting it out there en masse.

Erwin Heiser said on December 05, 2008

I'd be happy if border-radius would pass the w3v's validator already ;(

Duane Nason said on December 05, 2008

@Travis - "IE8 will have no CSS3 support at all." ... yikes. I hope msft decides to rethink this one.

steve said on December 10, 2008

Hi Snook,

Unfortunately after IE Chats with Chris Wilson/Eric Lawrence/others... rounded corners will **not** make it into IE8 for sure.

steve said on December 10, 2008

Both versions use VML, thus both will need to be adjusted to work in IE8 Standards Mode.

Since IE8 tries to do the standards thing, you need to have an import statement to use the v: namespace.

See bug reports:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333905

and

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=364096

Drew Diller said on December 10, 2008

@steve, those URLs are helpful... even encouraging, if I dare say so. I'll look into it.

Dan said on December 11, 2008

@Drew - You could probably also mix Opera support in via SVG if desired, ala Dave Storey's implementation here:

http://files.myopera.com/dstorey/experiments/roundedcorners.html

GreyCells said on February 03, 2009

@Chris Lienert - That's exactly what I'm doing (particularly on admin pages). The whole design looks great in FF & WK, but *really* clunky in IE. Which is the right message we should be giving: Stop using legacy code - it look crap, because it *is* crap!

It's been a very effective motivator for getting customers to move to a more secure/standards compliant browser.

Ahmet Maranki said on February 08, 2009

I'd be happy if border-radius would pass the w3v's validator already ;(

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.