34

I have the following which works in Firefox, Chrome and Safari. But not in IE9. It's applying rounded corners to the top left and right of a td. What am I missing?

border-left: solid 1px #444f82;
border-right:solid 1px #444f82;
border-top:solid 1px #444f82;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
-khtml-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
-khtml-border-radius-topleft: 7px;
behavior: url(/survey_templates/PIE.htc);
Premraj
  • 7,802
  • 8
  • 45
  • 66
derekcohen
  • 1,514
  • 4
  • 17
  • 34

5 Answers5

75

As far as I know border radius should work on IE9. You might be missing this in your page header:

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

"edge" means "use the latest rendering engine" so IE 9 will use 9, 10 uses 10, etc.

Community
  • 1
  • 1
kprobst
  • 16,165
  • 5
  • 32
  • 53
  • 1
    that fixed it - hope it doesn't break anything else – derekcohen Mar 21 '11 at 18:33
  • 2
    Unbelievable. Adding this just fixed all my IE9 rendering errors. Now looks exactly like WebKit with no CSS changes at all. – adam Jun 26 '12 at 16:42
  • thank you thank you for this! only wish I had found this answer hours ago :} – Patrick Moore Jul 16 '12 at 18:21
  • As far as I'm aware (and please prove me wrong if there are edge cases) but this is un-necessary if you provide a valid and modern doctype. Isn't it better practice to provide a doctype then add a(nother) line which is IE-specific? – Adam Casey Oct 02 '12 at 17:02
  • @Dotmister: that sounds great, assuming you'd care to share an example of what you mean exactly by "valid and modern". Being 56 years old as I am, to me the pushbutton phone dial is "modern", since I grew up with the old rotary kind. :) – BobRodes Oct 09 '12 at 00:19
  • I don't know why but my ` ` was not good enough for IE9, which was in IE7 Standards mode until I also added this meta tag. Thanks for the tip! – Coderer May 16 '13 at 12:53
  • 1
    @Dotmister: Depending on the browser settings the DOCTYPE is not enough to throw IE9 out of compatibility mode. The edge statement ensures it. – Paolo Bergantino Jul 22 '13 at 17:32
  • i added this and it still doesn't work! and i have the tag! what the hell is wrong?? – Suzanne Edelman Creoconcept Nov 10 '16 at 11:26
20

Have you got this at the top of your HTML document (Above the <html> tag)

<!DOCTYPE html>

IE9 requires this for the website to display the new HTML5 / CSS3 things

Edit: Or many other Doctype's (XHTML etc, but this is the shortest and easiest to remember)

Adam Casey
  • 1,600
  • 12
  • 21
13

In addition to causes mentioned by other answers, Check in developer's tool (PressF12) your Document Mode should be set to Internet Explorer 9 Standards

enter image description here

Shekhar_Pro
  • 18,056
  • 9
  • 55
  • 79
1

Working great in explorer 9 and 8 with:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
devluis
  • 11
  • 1
0

Have added <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=edge" /> in the page header and it has resolved my issue. If border-radius is not working in IE9, you've got to add both <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=edge" /> in the page header. Please bear in mind if you have <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> at the top your page the border-radius may not yet appear in IE9, therefore it's better you change it to <!DOCTYPE html>

Omid
  • 1
  • 2