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

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.

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)

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

Working great in explorer 9 and 8 with:

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

ie9 border radius

Related

Recent Posts