Take the 2-minute tour ×

curved css corners for some reason dont seem to work in IE9. I know it supports it however i have looked all over the web for a solution and cant find one that works for me. I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. I used the .htc file and behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. I even tried declairing all 4 values, and didnt make a diffrence. Work beautifuly in firefox, chrome, and safari but not in IE. Any help? Check it out: my web page If you have some debugging tool might help you help me.

share|improve this question
your page looks great in my IE9. You probably can't see rounded corner because of that htc file –  Mohsen Sep 10 '11 at 5:33
so you see rounded corners? and i have the file, should i remove it? –  Osman Sep 10 '11 at 5:52

6 Answers 6

up vote 6 down vote accepted

Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.

Detail explanation here Investigating Document Mode Issues

share|improve this answer
changed that and still no result! –  Osman Sep 10 '11 at 5:49
trying correcting the majority of the issues in the w3c validator. especially any trailing slashes in self closing tags (img, link, etc), they are not valid in HTML4 –  seanmetzgar Sep 10 '11 at 6:13
needed to tell it to load strict, this is why i dont use ie!!!! –  Osman Sep 10 '11 at 6:34
amen to that... –  seanmetzgar Sep 10 '11 at 6:38

I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects.

To fix it add this to your html head:

<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
share|improve this answer
Worked like a charm for me. Thank you. –  hammerbrostime Jun 26 '13 at 1:39

Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;

You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage.

share|improve this answer
tried that and its a no go, you can see it in the source code –  Osman Sep 10 '11 at 5:26
could it just be my IE? –  Osman Sep 10 '11 at 5:27
yo, pull the this block &#60;script src="js/prototype.js" type="text/javascript"&#62;&#60;/script&#62; &#60;script src="ajax_framework.js" language="javascript"&#62;&#60;/script&#62; &#60;script src="js/popup.js" type="text/javascript"&#62;&#60;/script&#62; &#60;link rel="stylesheet" type="text/css" href="mainstyle.css" /&#62; into your &#60;head&#62; element i don't think it's your IE –  albert Sep 10 '11 at 5:37
thats my javascript ? my site needs that? –  Osman Sep 10 '11 at 5:45
the popup.css doesn't have the proprietary extensions aliahealthcare.com/js/popup.css –  albert Sep 10 '11 at 5:52

IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). Your browser probably have a problem. Maybe you're running beta or something like that.

Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine.

share|improve this answer
that example works just fine! why wont my site work? is there anything tht can conflict with border-radius ? –  Osman Sep 10 '11 at 5:43
did you tried to load IE without add-ons? You can press F12 in IE9 and bring up developer tools. Then click on that little refresh button then inspect your element using that cursor icon. Then go to "Attribute" tab in right pan and add border-radius style. It's kind of like chrome dev tools. –  Mohsen Sep 10 '11 at 5:53
thats the strange thing ie doesnt even see the border-radius css code? –  Osman Sep 10 '11 at 6:07
I would test it in another computer. :) –  Mohsen Sep 10 '11 at 6:09
ok so i found the issue, my page loads in quirks mode, not sure why –  Osman Sep 10 '11 at 6:10

I found that my border radius in ie9 is working on localhost but not on a server. Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9?

share|improve this answer

Quirks mode is where IE9 switches back to IE5 functionality (added following link to @seanmetzgar post also)

Detail explanation here Investigating Document Mode Issues

With a site I look after, which had ASP code right at the top of page, I added

<!DOCTYPE html> 

just in front of the tag, below the code, and IE9 stopped going into Quirks Mode.

share|improve this answer

Your Answer


