CSS - border-radius doesn't display in IE6/7/8

Question

I'm using the following CSS to achieve a rounded border on my DIV:

border: 1px solid #999; 
border-radius: 6px; 
-ms-border-radius: 6px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px;

But in IE 6/7/8, even though I'm including the IE specific radius, it is not displaying a rounded DIV border (it's displays a square border).

Any ideas why only IE 6/7/8 doesn't display a rounded border?

Solution 1

As of IE8, IE doesn't support the CSS3 border-radius property. Not sure what you saw that said it did. You can use images, javascript, or many other tricks to round corners in IE.

Solution 2

there is no -ms-border-radius internet explorer doesn't support it.

The 'newest' thing microsoft has to say about rounded corners is this old table+images hack titled 'Staying Ahead of the Curve' ;-)

Solution 3

IE does not support border-radius.

From IE8 Expert Zone Chat:

Chris Wilson [MS] (Expert):

Q: [9] Any plans to support CSS' border-radius, eg. -ms-border-radius:5px; ? Firefox and Safari have -khtml- and -moz- implementations which we can use to do rounded corners without images or sprites, and improve performance ie. http://preview.tinyurl.com/9y3tfn/

A: border-radius is high on the wish list, but will not be in IE8.

Solution 4

While I realise that an answer's been accepted, I wanted to suggest -if you need further advice/support/guidance- that you have a look at Curvy Corners; they have a JS library with examples.

As, of course, do MooTools, albeit with a third-party (so far as I could tell) module from phat fusion. And jQuery has its own third-party corner plugin, from methvin.

View more solutions

Comments

[Sarfraz]

You can use CSS3Pie to support that even in IE including IE6: css3pie.com

[Solomon Duskis]

IE9 supports border-radius (without any prefixes, like -ms): stackoverflow.com/questions/3162890/…