Border Radius For Ie8

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/

Does not work border-radius IE8

Standalone .htc hack is not working for background gradient and border-radius both at the same time.

Try to replace css gradient with simple image. This trick will work.

Also you can use css3pie (thanks to @dop-trois) — this pure Javascript tool is more perfect than standalone .htc file.

PS. Inset box-shadows cannot be implemented in both solutions.

PPS: the code you need is here: (i changed it a bit to make it more valid and correct):

.mc-button {
    font: bold 11px/29px Arial, Helvetica, sans-serif !important;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;

    border: 1px solid #DCDCDC;
    height: 29px;
    min-width: 70px;
    padding: 0 8px !important;
    overflow: visible;
    display: block;

    float: left;

    /* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
    background-color: #CBCBCB;
    background: -moz-linear-gradient(top,  rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */

    /* css3 stuff below: (via css3please.com) */
    /* no one prefix except `-webkit` is needed nowadays for `border-radius` */
    -webkit-border-radius: 5px;
            border-radius: 5px;
    -webkit-transition: all 0.218s ease-out;
       -moz-transition: all 0.218s ease-out;
        -ms-transition: all 0.218s ease-out;
         -o-transition: all 0.218s ease-out;
            transition: all 0.218s ease-out;

    /* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
    behavior: url(PIE.htc);
}

You should be sure that you have included PIE.htc correctly (important!)

Relative questions

• Using CSS3Pie htc for border-radius in IE8
• CSS3 PIE - Giving IE border-radius support not working?
• CSS3 PIE - Giving IE border-radius support not working?

Accordingly to answers possible problems may be in mime type ("text/x-component").

Also possible solution may be:

position: relative;
z-index: 0;

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.

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.

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.

---

Related Topics