Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 407
derekcohen Avatar asked Mar 21 '11 17:03

derekcohen


3 Answers

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.

like image 113
kprobst Avatar answered Oct 30 '22 03:10

kprobst


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)

like image 20
Adam Casey Avatar answered Oct 30 '22 03:10

Adam Casey


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

like image 13
Shekhar_Pro Avatar answered Oct 30 '22 03:10

Shekhar_Pro