Creating Rounded Corners in IE7/IE8

Creating rounded corners in IE7 / IE8

IE 7/8 do not support border-radius. I hear IE9 does though.

This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

CSS rounded corners in IE8

Internet Explorer (under version 9) does not natively support rounded corners.

There's an amazing script that will magically add it for you: CSS3 PIE.

I've used it a lot of times, with amazing results.

How to achieve rounded corner in IE8

IE<9 doesn't support border-radius.

You can use CSS3Pie to fake it.

How to apply border radius in IE8 and below IE8 browsers?

Option 1

http://jquery.malsup.com/corner/

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT:
Option 6

https://code.google.com/p/jquerycurvycorners/

How to fix border radius in IE8 (ie7, ie6)

You could try CSS Pie. I've not used it, so I can't vouch for it.

Overall, though: I'd let it go. The absence of rounded corners won't break the experience for users in IE8. More capable browsers get the better experience. Progressive enhancement is a beautiful thing.

Curved corners IE 7,8 Issue

IE7 and IE8 don't support CSS3 rounded corners. You will need to look to other IE specific solutions if you want to emulate this.

How to create rounded corners in ie 8 and < is one method using .htc controls for IE.

I need to add that no solution to your problem I have ever found is 100% they all have drawbacks and can never have the full functionality that CSS3 offers.

How do I use CSS to create rounded corners in IE 8?

After a lot of research, I have found that there is a fix similar to the PNG transparancy fix available to IE6, called CSS3Pie. The website to the solution is found here: http://css3pie.com

You will simply have to add behavior: url(path/to/pie_files/PIE.htc); to your css anywhere you wish to implement rounded corners.

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/pie_files/PIE.htc);
}

Support for border-radius in IE

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

---

Related Topics