ie9 border radius

html css internet-explorer-9
derekcohen picture derekcohen · Mar 21, 2011 · Viewed 62.6k times · Source

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

Answer

kprobst picture kprobst · Mar 21, 2011

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.

Related questions

Why does IE9 switch to compatibility mode on my website?

I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing …

Read More
How do I make an "else" in an IE HTML conditional?

<!--[if lt IE 9]> This is less then IE9 ELSE this is all browsers: firefox, chrome, etc. <![endif]--> How do I do this in my HTML? I want to do an "else" ...

Read More
Target IE9 Only via CSS

Just wondering given these IE hacks in my bag of tricks "\9" - for IE8 and below. "*" - for IE7 and below. "_" - for IE6. i.e. such as body { border:2px solid blue; border:2px solid yellow \9; *border:2px solid …

Read More