Border-radius does not work on IE10

Question

I need to have a "DIV" container with rounded corners. The following code works fine in all browsers except my IE10. I do not know how to do this 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 is the HTML part, please:

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

It is not possible to make any round corner visible in IE10. My version: 10.0.9200.16576, version for updating: 10.0.5 (KB289530).

Answer 1

The behavior of the border radius depends on the compatibility mode in IE10.

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

If IE7 or IE8 standards are set in document mode, then the 5px border radius does not work, however if standards or IE9 standards are set in standard mode, then it behaves as expected.

I turned off compatibility mode, as it also violates the behavior of other websites that I use.

Ravenstar68

Answer 2

Thanks Unsubscribe I found the answer. In IE10, "border-radius" doesn't work for me. To make it work, you must 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 submitted does just that (see page source). It gives instructions as output:

 border-radius: 5px; 

but internally it declares 4 corners separately, as indicated above.

_{This was extracted from the question and sent to OP.}

Answer 3

Try using only the border: 5px radius, then does it work? If so, add additional radius radius properties one by one until you find where the problem is. I suspect this is one of the additional radius radius properties causing the problem. I suspect this may be causing the problem.