border-radius doesn't work on IE10

Question

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

Answer 1

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.}

Answer 2

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

Answer 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.