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 thought IE9 was supposed to support border-radius? If you need an example, see this site. All of the boxes on the right hand side of the page should have a curved border. It works in Chrome and Firefox...

On another annoying, unrelated note, I found out today that IE9 doesn't support the :last-child pseudo class. What an incredible letdown so far...

score 15 · Accepted Answer · edited May 23 '17 at 12:23

15

Have you included this:

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

See this thread.

edited May 23 '17 at 12:23

Community

1
1

answered Mar 16 '11 at 05:02

Mark Westling

5,904
4
26
30

1

Wow, I did not even think of that. I don't have access to that site I linked anymore, but I will try this out tomorrow on a project I'm currently working on. Is this tag even necessary anymore with the release of IE9? – Aaron Mar 16 '11 at 05:08

score 10 · Answer 2 · answered Feb 02 '12 at 13:52

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;

[You can use SVG to produce the gradient in IE9; this plays nicely with `border-radius`](http://stackoverflow.com/questions/12211213/ie9-issue-border-radius-and-linear-gradient/12211297#12211297). — Paul D. Waite, Aug 31 '12 at 08:20

Fabricio · Answer 3 · 2015-06-22T19:34:02.257

2

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.

edited Jun 22 '15 at 19:34

answered Jun 27 '12 at 18:55

Fabricio

3,248
2
16
22

2

This answer may be pretty close to the truth, but is inaccurate. Quirks mode is not the default, unless the page is badly written. The actual default you probably mean is IE7-Compatibility mode, which is set as the default on some machines for sites "in the local intranet" (which includes localhost). This will indeed break border radius (and a lot of other things), but it is very different from quirks mode. – Spudley Jun 27 '12 at 20:59

score 2 · Answer 4 · answered Mar 16 '11 at 05:04

2

IE9 does support border radius, even shorthand. I'm not sure why it doesn't work on your website, but it is supported.

(See http://jsfiddle.net/wJd2h/ for proof)

IE9 also supports :last-child.

Maybe you are using an old HTML doctype?

EDIT: I looked at your source. Change <meta http-equiv="X-UA-Compatible" content="IE=8" /> to <meta http-equiv="X-UA-Compatible" content="IE=9" />

answered Mar 16 '11 at 05:04

Peter Olson

139,199
49
202
242

Thank you for the suggestion. I certainly hope that's the case. I will try out the meta tag tomorrow. It would definitely be great if that was the sole issue regarding :first-child as well... – Aaron Mar 16 '11 at 05:10

score 2 · Answer 5 · answered Jan 29 '12 at 12:18

2

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

answered Jan 29 '12 at 12:18

Hilmon

21
3

score 1 · Answer 6 · answered Apr 25 '12 at 02:57

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]"

score 1 · Answer 7 · edited May 23 '17 at 12:30

1

If you are using VMWare Fusion on a Mac, it could be an issue with the VM. See IE9 Rendering elements with opacity, border-radius or cufon

edited May 23 '17 at 12:30

Community

1
1

answered Jan 18 '13 at 15:55

Ethan Winters

76
2

score 0 · Answer 8 · answered Dec 04 '11 at 16:21

0

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.

answered Dec 04 '11 at 16:21

Eric Yin

8,737
19
77
118

1

You're right. The reason why it wasn't working was because of that tag I had that was targeting IE8. Removing that completely makes it work (along with keeping the tag I had but changing the target to IE9) – Aaron Dec 05 '11 at 15:21

IE9 border-radius shorthand not supported?

8 Answers8

Linked