Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

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.

#myelement {
       behavior: url(PIE.htc);
       border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
}

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?

Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

Css, css3, ie rounded corners, ie rounded corners tutorial, ie6, ie7, ie8, ie9, rounded corners, rounded corners to ie, rounded corners to internet explorer.

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

1. July 31, 2010 at 10:30 am Brandon Morales

   I was trying to figure out a method to get css3 to work in IE for so long(Found out ie did not support css3).

   Thanks Marcell
   
   • July 31, 2010 at 10:45 am Marcell

     No Problem! Glad your happy

2. July 31, 2010 at 10:34 am Demetrice Green

   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
   
   • July 31, 2010 at 10:44 am Marcell

     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

3. July 31, 2010 at 10:37 am Kareena

   Fantastic Post! I like how you simply explain this technique without having to write a whole page on it.
   
   • July 31, 2010 at 10:43 am Marcell

     Thanks! Yes I love to explain things and the most simplified way because not every is computer savvy

4. July 31, 2010 at 10:42 am Aaron Bilgrad

   Great Article Marcell

5. August 4, 2010 at 5:19 pm iGeekyGirl

   SWEET! Thanks for this post Marcell! IE gives me much grief and I’ve been looking for a way to do this for a while.
   
   • August 5, 2010 at 11:15 am Marcell

     No problem! IE gives us all grief. Why can’t it just get along with the other browsers lol

6. January 28, 2011 at 7:04 am Hittesh

   Nice one there mate!

7. March 2, 2011 at 3:05 pm Hermes

   Marcel,

   where can i download your htc file?
   Or can you post it to my email address?

   Thanks.

8. March 17, 2011 at 5:06 pm Colin Reilly

   This post just may have saved my day. I’ve scouted everywhere to find a working way to add rounded corners to css with IE, but every other way made you put in extra code, and add images. >.<

9. March 17, 2011 at 5:44 pm Colin Reilly

   Nope, for some reason it just made my divs disappear.

   Are you not allowed to target certain corners? And can you only use an ID? or can it be classes?

10. March 31, 2011 at 11:59 pm steve

    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.
    
    • April 1, 2011 at 6:26 pm Marcell

      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.

11. May 11, 2011 at 4:46 pm JOnes

    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 ?
    
    • May 21, 2011 at 6:18 pm Marcell

      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.

12. May 23, 2011 at 3:49 am um

    Thanks – works like a charm

13. May 24, 2011 at 8:41 am oritzio

    I have a solution for you that works also in IE:
    http://oritzio.com/pages/demos/CssRoundedCorners/
    
    • August 4, 2011 at 4:58 pm flylover

      That works. thanks

14. June 5, 2011 at 12:54 pm Waheed Akhtar

    It would have been really nice if this code was working on this site (on sidebar ad spots [top right])

15. July 6, 2011 at 10:38 pm Robert Crawford

    Where’s the zip file for this article?

16. July 7, 2011 at 8:26 am roy

    It works fine, but it would be nice to style invidual corners too…

17. July 22, 2011 at 7:04 am Rob

    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.

18. July 28, 2011 at 8:12 pm ahmed ameen

    we should have put the property of behaviour in each rounded corner element ?

19. August 11, 2011 at 8:47 pm Zenith

    Hi
    How i can rounded corners in other browser?
    tnx

20. August 19, 2011 at 4:05 am NANDA

    looks like a good solution.

    the zip file has a PIE.js
    should that also be included or is only the .htc sufficient?

21. August 30, 2011 at 9:37 am Aldo Marchioni

    It works great, but it seems you have to give up gradients. If I use gradients, it does not seem to work.

22. August 31, 2011 at 12:56 pm Steve

    PIE is freaking awesome! Thanks so much for pointing this out!