IE9 border-radius shorthand not supported?

Question

I have a few things I\'ve made in the past that have the border-radius attribute like this:

border-radius: 7px;

This is not working in IE9. I t

Answer 1

IE9 does support browser radius, but if you are working on a local site or local file, you should be sure the Broser Mode and Document Mode are right. To check it hit F12 and then check de values (Please see the picture). For example if Document Mode are set on Quirks Mode (which is the default) and you don't specify the document mode on the html document, IE9 may interpret this document as a IE7 document so the radius doesn't work. But if you set Document Mode to IE9 standard you will see a pretty radius on the input.

Please take a look at the picture in http://moodle.org/pluginfile.php/115/mod_forum/post/843271/IE9-F12.jpg

I hope that this can help you with the radius. :)

So long this post.

Answer 2

I'm no expert, but when ever I use

<meta http-equiv="X-UX-Compatible" content="IE=edge,chrome=1"> or even
<meta http-equiv="X-UA-Compatible" content="IE=9" />

the W3C VALIDATION

checker in Dreamweaver CS5.5 kicks it back, stating the following

"Bad value X-UA-Compatible for attribute http-equiv on element meta. [HTML5]"

Answer 3

ok, I searched Google and found this. In fact, you do not need to do anything on your code, please check if the "Compatibility View" is on in your IE9.

Answer 4

Yes the answer to this correct, however as a related side note, IE9 currently does not support border radius used in conjunction with the gradient filter.

Spent an hour trying to make this work before bothering to search for a similar question.

// This is the filter code for a gradient in IE (6-9) along with a border radius
//THIS DOES NOT WORK
//You have to use one or the other, you could use javascript for rounded corners and then use the gradient if you wish    

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcdd68', endColorstr='#355e0b',GradientType=0 ); /* IE6-9 */

/*border radius*/
 -khtml-border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Answer 5

Have you included this:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

See this thread.

Answer 6

Even Better ....

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This is taken from the exellent HTML5 Reset template