CSS - border-radius help

Question

Hi

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, 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?

Answer 1

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.

Answer 2

There is no such thing as a "IE specific radius". Internet Explorer simply has no support for border-radius. Here's a good read on this topic:

http://www.the-art-of-web.com/css/border-radius/

Answer 3

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

Answer 4

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.

Answer 5

Internet Explorer does not support modern standards. While other browsers seem to be fighting a war on which browser supports the most standards (both Opera and Safari claimed to be the first browser that passed the Acid3 test), Microsoft doesn't care about standards, which makes it really hard for web developers to use them as still to many people use IE.

You will have to create images for the borders and add a lot of extra divs and css to get the desired effect.

Answer 6

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.