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 😉

Any questions or comments?

  1. Caron says:

    Thanks for your tutorials, they are appreciated.

    I’ve just used curvy corners according to their instructions under the heading: ‘Using CurvyCorners manually’, it works fine.

    I see you are using it differently in your demo:

    When you use the script as per ‘my demo’, does curvy corners automatically detect all instances of use for the the border-radius property in the css, then without needing specifying divs or classes, it just create the round corner when the browser cannot do it??

    or am I missing something,

    1. Jamy Golden says:

      Hey Caron, perhaps I need to rename the “Curvycorners” and “What I do” headings.

      The “My Demo” uses CSS3 to round corners, but when IE enters the picture it places divs with background images in each corner. So it’s CSS3 for all browsers, but it loads the images for IE.

      I wouldn’t use either of these methods anymore. You should have a look at css3pie, it’s very cool and easy to use. I think I’ll update this article in the near future.

  2. Caron says:

    Thanks Jamy,

    I just tried css3pie out. Very nice, except: my div’s background transparency gets lost, and I get a grey opaque div instead of a 20% white transparent one. Apparently this is an issue with css3pie. Also: even though I’ve set an instruction in the code to render IE9 as IE8, css3pie ignores this, so the css3pie effects only apply to IE7 & 8 with nothing to IE9. ( I did this because of a float drop problem with a pull down menu in IE9)

    I hope they work that one out, in the meantime, I think I’ll just stick to the js, curvycorners. Works without images. Thanks again for a great site.
    best,
    Caron

  3. djs says:

    Found this very helpful and complete. The curvycorners script, the original, worked great but I needed a straight CSS solution. The fall backs here combined with the Rock Solid method were perfect-o!

  4. nuvu says:

    Thanks for the article, I have used PIE on a number if occasions, but like you say it has some random things that tend to go wrong, however getting it to work (when it does) with just a behavior attached to the css is super simple in concept, and allows you to avoid those conditional comments…

    1. maaz says:

      hi. your commets is true , that help me a lot
      )))))))))))))))))))))))))))))))))))))))

  5. Martin says:

    As I’m from Durbs I’ll drop you a line.

    IE8 – PITA! I want to add unequal radii to a nested in a menu per the above site in Chrome. I’ve tried about everything and don’t want to resort to images. PIE only works on block level elements (in this case the wrapper and and I am surprised there is not a way round this.

    Cheers,
    Martin

Leave a Reply to Martin Cancel reply