0

Border Radius is not working in IE9. The following Attribute i used in my project. and also i add the .HTC file also

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(Styles/border-radius.htc);
  • 3
    The HTC is irrelevent for IE9; you only need it for IE8 or lower. IE9 supports `border-radius` just fine. Don't know why it's not working for you; there's not enough info in the question to diagnose it. You'll need to provide a demonstration of the problem actually happening. One point though: If you are going to use a HTC to support IE7/8, you should consider [CSS3Pie](http://css3pie.com/); it's better than the one you're using. – SDC May 28 '12 at 12:59
  • 1
    IE9 supports border-radius property, once check your browser mode i.e.Browser mode:IE9 and Document mode:IE9 – Valli69 May 28 '12 at 13:07
  • radius at IE is working, mabye somting is wrong with the code can you upload it you can use: PasteBin or anyother site to upload the code, have a nice day. – Blanktext May 28 '12 at 12:55

10 Answers10

5
.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.

Gaurav Agrawal
  • 4,355
  • 10
  • 42
  • 61
4

Use 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Ballu Rocks
  • 1,206
  • 3
  • 13
  • 15
3

This is an old thread, but it did not help me. My solution was to add the HTML 5 doctype declaration to the page:

<!DOCTYPE html>

Other HTML doctype declarations may work too - my problem was I was generating the pages with no doctype declaration at all.

Ags1
  • 619
  • 1
  • 9
  • 18
  • I experienced the same problem as the OP; styles such as `border-radius` and others would not work in Internet Explorer 11, but would work in other browsers such as Firefox. Adding the ` ` declaration did help some styles to begin working in IE11. But the `border-radius` still did not work. – Mike Finch Dec 08 '16 at 14:35
  • Follow up: I experienced the same problem as the OP, but **only** when `border-radius` is defined in an internal style sheet (i.e., within the ` – Mike Finch Dec 08 '16 at 16:13
2

You need to put this in your HTML header

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

Answer discovered here ie9 border radius

Community
  • 1
  • 1
dockeryZ
  • 3,981
  • 1
  • 20
  • 28
  • I experienced the same problem as the OP; styles such as `border-radius` and others would not work in Internet Explorer 11, but would work in other browsers such as Firefox. Adding the `` tag suggested by @dockeryZ did help the `border-radius` style to work. That meta tag seems to be the essential thing for `border-radius`. As I mentioned in another comment, the ` ` declaration suggested by @Ags1 did not help for `border-radius`, although it did help for other styles. – Mike Finch Dec 08 '16 at 14:42
  • Follow up: I experienced the same problem as the OP, but **only** when `border-radius` is defined in an internal style sheet (i.e., within the ` – Mike Finch Dec 08 '16 at 16:14
0

border-radius.htc broke normal border-radius in ie9, include border-radius.htc file in ie versions below 9 with conditional comments

Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
0

in IE9 border-radius works without any behavior files.

mborecki
  • 162
  • 4
0

This answer will also help with lower versions of ie, like ie6,7,8.

Using CSS Pie -> http://css3pie.com/

This will allow you to specify your border radius normally and then include the pie.htc script in your css. This magically make it work in IE6. Look at that!

This also works with other CSS3 properties like background gradients.

You can also try adding this to your head ->

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

Good luck!

Undefined
  • 11,234
  • 5
  • 37
  • 62
0

border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners

CSS Guy
  • 1,978
  • 3
  • 18
  • 27
0

If you use at the same time border-radius with filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='######', endColorstr='######',GradientType=0 ), just comment this filter.

belkin
  • 1
0

No matter what you include or what you write border-radius doesn't work in ie9. Changing the browser mode or document mode is never a solution because that it is on the client side. So i am afraid my friend there is no plausible way to make border-radius work properly in ie9 unless you take the help of javascript.

Shivayan
  • 136
  • 1
  • 2
  • 13