CODEWITHSUNDEEP
htmlcssinternet-explorer-9
derekcohen
derekcohen

Reputation: 1514

ie9 border radius

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);

Upvotes: 34

Views: 62797

Answers (5)

devluis
devluis

Reputation: 11

Working great in explorer 9 and 8 with:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

Upvotes: 1

Omid
Omid

Reputation: 1

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>

Upvotes: 0

kprobst
kprobst

Reputation: 16651

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.

Upvotes: 75

Shekhar_Pro
Shekhar_Pro

Reputation: 18420

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

Upvotes: 13

Adam Casey
Adam Casey

Reputation: 1620

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)

Upvotes: 20

Related Questions