0

Possible Duplicate:
Support for “border-radius” in IE

I can't get border-radius to work in IE in my project, so I created this simple html file to see if I'm missing something.

<html>
<head>
<title>border test</title>
<style type="text/css">
body{background-color: #009de8;}
div{border: 2px solid red;border-radius: 5px;}
</style>
</head>
<body>
    <div>
        <h1>Hello world!</h1>
    </div>
</body>
</html>

Still, borders are anything but round, though IE9 is supposed to support border-radius property.

Any idea what I'm missing?

Community
  • 1
  • 1
ppp
  • 2,035
  • 9
  • 32
  • 52

2 Answers2

6

Internet explorer, in general, goes into quirks-mode if no DOCTYPE tag is included, which will render pages in a somewhat unexpected way.

Add this html5 doctype tag at the beginning of your html document (first line) and it will work:

<!DOCTYPE html>

and it should work.

Shahar
  • 2,269
  • 1
  • 27
  • 34
  • THIS is the answer. The X-UA thing is a non-standard crutch for IE which is the most incompetent browser on the planet. – Rob Jul 21 '12 at 11:13
  • This applies to all browsers that have a quirks mode as well, which is to say all of them. IE just happens to have one that is so egregiously bad that it is the precise reason why it's so... bad. – BoltClock Jul 21 '12 at 16:29
1

Check Support for "border-radius" in IE

You need this:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
Community
  • 1
  • 1
Aziz
  • 20,065
  • 8
  • 63
  • 69
  • Trick got done, will accept when system lets me. ty. – ppp Jul 21 '12 at 10:33
  • Does `border-radius` work if you instead declare a valid doctype? – starbeamrainbowlabs Jul 21 '12 at 10:35
  • 1
    @starbeamrainbowlabs: It should. – BoltClock Jul 21 '12 at 10:49
  • 1
    in my actual project I use valid doctype for html5, but it doesn't seem to work.. should it? – ppp Jul 21 '12 at 10:50
  • funny thing.. tried to validate my html with the meta tag from the answer and got:Validation Output: 1 Error Error Line 5, Column 52: Bad value X-UA-Compatible for attribute http-equiv on element meta. – ppp Jul 21 '12 at 10:53
  • 1
    The X-UA thing is a crutch for incompetent IE and not a standard way to do things. See Shahar's answer. – Rob Jul 21 '12 at 11:14
  • 2
    @AnPel Who cares if it validates when it *works*? But better use ` ` because it turns **all** browsers, not just IE, into standards mode. – duri Jul 21 '12 at 11:15