border-radius doesn't work on IE10

问题

I need to have a container "DIV" with rounded corners. The following code works perfectly on all browsers except my IE10. I have no clue how to do in order to make it work.

#about-kader {
    width: 200px;
    height: 180px; 
    float: left;
    margin: 0px auto;
    background-color: #9bafc4;
    padding: 3px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px;
    -ms-border-radius: 5px;
    behavior: url(border-radius.htc);
}

And here's the HTML part, please:

<div id="about-kader">
...
...
...
</div>

There is no way to make any round corner visible on IE10. The version I have is: 10.0.9200.16576, Update versions: 10.0.5 (KB289530).

回答1:

The behaviour of border radius is affected by compatibility mode in IE10.

If you press F12 you can view the developer console and change the compatability settings.

If the Document mode is set to IE7 or IE8 Standards then the border-radius 5px doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.

I have ended up turning off compatibility mode as it also breaks the behaviour of other websites I use.

Ravenstar68

回答2:

Thanks to Flipbed's answer I found the answer. On IE10, the "border-radius" to me doesn't work. In order to get it working, it's necessary to specify each corner:

border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

Indeed the site you sent, does exactly that (look the page source). It gives as output the instruction:

border-radius: 5px;

but internally it declares the 4 corners separately as above.

_{This was extracted from the question and posted on the OP's behalf.}

回答3:

Try only using border-radius: 5px, does it work then? If it does, then add the extra border-radius properties one by one until you find where the problem arises. I suspect that it is one of the extra border-radius properties that is causing a problem. I suspect that the behavior might be the source of the problem.

来源：https://stackoverflow.com/questions/16623380/border-radius-doesnt-work-on-ie10

标签

css

css3

internet-explorer

rounded-corners