Adding rounded corners to internet explorer 6,7, and 8 using CSS3

Adding rounded corners to IE using css3 was impossible considering Internet Explorer does not support css3. The only way to add rounded corners to IE was to create rounded corner images. Well today I will go over the techniques that will allow you to use rounded corners in IE web browsers.

The Steps

So adding rounded corners to IE6, IE7, and IE8 is fairly simple thanks to css3pie . First things first, download the PIE distribution zip and save it.

You should have 3 files inside of the folder. Look for a file called pie.htc and drag it into your website directory. It can be place where just remember to call it correctly in the stylesheet.

Now we will create the rounded corners and call the effects. In the code below I have written some css. The #myelement is the variable that you can identify in your HTML document. I’ve also called for the pie.htc function in my stylesheet where I would like for rounded corners to work in IE.

You should now have rounded corners in IE browsers. Remember that this is this development is still in beta so if you just so happens discover a bug or so report it to the css3pie team. I have not encountered a problem yet but everyone code is different so look out. I hope you guys enjoy this little hack. What are your thoughts on this and have you used css3pie before?

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Demetrice Green says:

    css3pie?? Never heard of it but it seems like a pretty good solution to creating rounded corners and Internet Explorer. I’ll have to give it a try really soon

    • Marcell says:

      Yes it is pretty good though it is still in beta so if you run across a couple of bugs just remember this is still in development

  2. steve says:

    it actually seems like quite a bit of code if you look at the javascript files, i would never want to write something like that. ugh. I can’t get it to work on my site, there seems to be some problem with the htc file not being able to access some other file in my site. Maybe something to do with my using php files for my css. will keep trying, but my temptation in general is to let ie have square corners.

    • Marcell says:

      Yeah I remember the pie script was in beta but it worked for me. If you cannot get this method to work just use image sprites.

  3. JOnes says:

    Hello,
    followed instructions and got corners work for only IE9..

    I’m using IE tester for check it out for different IE versions..

    What could i do wrong ?

    • Marcell says:

      That version was a beta but my suggestion would be to add rounded corners to your elements and go back using conditional stylesheets to style your elements in ie.

  4. Rob says:

    Fantastic information – this was a great help. Works very well for me – it may not be incredibly in-depth, but to even have the ability to add simple rounded corners in older browsers is great.

Leave a Reply