IE and rounded corners

Note: The original post was published March 19 2010. The original article's CSS3 emulator of choice was CurvyCorners

When someone uses the words "rounded corners" and "IE" in the same paragraph, rest assured a puppy has died somewhere.

There are a few ways to achieve rounded corners in IE, unfortunately none of them are pain free. I usually like to use rounded corners as progressive enhancement, so IE8 and lower just have to deal with square corners. Luckily, IE9 has been released and it supports the border-radius CSS property. IE10 is already on the way and it should be released sometime at the end of this year. Go Microsoft.

There are two methods I would use to round lteIE8 corners.

CSS3 PIE

CSS3 PIE stands for CSS3 Progressive Internet Explorer. It aims to emulate CSS3 properties such as border-radius, box-shadow, etc. within IE6, 7 and 8. It's currently at version 1.0 beta 4.

The Pro's

• Very simple once you get it working
• It rounds corners nicely, unlike other CSS3 emulators
• Extremely flexible - The border-radius, background and border properties can be changed at will and the corners will round perfectly

The Con's

• I always seem to run into problems while trying to get it to work
• There are random inconsistencies which annoy me - They are too weird to even explain properly, but I'll give it a try: The corners would only round if I target two different elements. If one was removed, the corners would be square for the other - This has only happened to me once. It's this kind of "illogical" inconsistency which frustrates me.
• Rounded objects have to have the position: relative property and value attached to it
• I don't know what it's doing in the background

CSS3 PIE Conclusion

You can count on CSS3 PIE to round something big and singular like the sidebar, but don't expect it to round something like 100's of little buttons. I always feel a tiny bit upset when I think of CSS3 PIE and I know there will be a bit of wrestling to get it to work, but it's definitely the best CSS3 emulating plugin out there. They are working on it constantly so my list of cons can only decrease.

CSS3 PIE Implementation Instructions

Make sure you read the instructions very well.

My Rock Solid Method

I use this method as a last resort. This means, the client is complaining about the square corners in IE and CSS3 PIE has failed me.

This method is pretty rock solid. Very basically I place little images in each corner to give the container the effect of rounded corners. In my opinion this is the best of the old methods and you can use technologies such as javascript to make it relatively painless. I've always found this method to be pretty limiting since the rounded corner images only "work" on containers of the same colour. While daydreaming one day, I realized I could invert the way I do this. By 'this' I mean create a transparent .png that 'contains' the outside of the element. Let me show you what I mean. This is the what a general image could look like this:As you can see, that would limit you to a red background. Very specific. Imagine the same thing, but without the red. It would create the exact same effect, but it would work on a background of any colour:The only downside with this is you have to make use of a transparent .png file, so a pngfix has to be used for IE6. (I've stopped supporting IE6, so this doesn't effect me).

The Pro's

• Pretty rock solid
• Easy to fix problems since it's easy to understand exactly what is going on
• Images are only loaded for IE6, 7 and 8

The Con's

• Not very flexible - New images must be created for different border-radii and to incorporate borders.
• Requires the .png fix plugin for IE6
• Uses images
• Relies on javascript
• Rounded objects have to have the position: relative property and value attached to it
• New image required for different sized border-radius

Rock Solid Method Conclusion

Images are used with this method, therefore it becomes pretty limiting. It is, however, very reliable which can end up saving you time and a lot of potential headaches.

Rock Solid Method Implementation Instructions

The two most notable things my RSM requires is javascript and a sprite.

Firstly let's create the sprite.Wow, that was quick! Wasn't it?

Next up is the HTML

<div class="rounded">
	<div class="tl"></div>
	<div class="tr"></div>
	<div class="bl"></div>
	<div class="br"></div>
</div>

The CSS

.rounded{position: relative; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }
.tl, .tr, .bl, .br{background-color: transparent; background-image: url(images/rounded-sprite.png); background-repeat: no-repeat; position: absolute;}
.tl, .tr{top: 0;}
.bl, .br{bottom: 0;}
.tl, .bl{left: 0;}
.tr, .br{right: 0;}
.tl{background-position: 0 0;}
.tr{background-position: -10px 0;}
.bl{background-position: 0 -10px;}
.br{background-position: -10px -10px;}

And lastly, the jQuery/Javascript

<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.rounded').prepend('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>');
});
</script>
<![endif]-->

The javascript automates this process to a certain extent. It will only load in IE browsers less than IE9 due to the HTML conditional statement. This javascript will pick up any class of .rounded and prepend the HTML for us. Unfortunately, we are still limited to the border-radius size and corner colour.

And that's it! I haven't used this with more than one border-radius size or background color, but you can just add classes for that, for example: .rounded-10px-orange{}

Good luck ;)