IE11 border radius and border bug

Question

I have an odd visual bug in IE11 as you can see in image here >

_{(source: jonwallacedesign.biz)}

See the odd effect on corners of the white

Answer 1

Please try this inside conditional CSS block.

background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;

hope this will fix your issue

Answer 2

Instead of a background-image why not use http://css3buttongenerator.com/ to recreate this button and save on any additional requests and loading time. I was able to re-create your button and your gradient just fine in IE 11 using the above generator. Picture attached; Button image

Answer 3

Solution:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style>
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>

Answer 4

You turn on IE10 mode by adding <meta http-equiv="X-UA-Compatible" content="IE=10" /> to head section and will work normally.

Answer 5

Adding a solid BG colour to IE10 + fixed this... seems like an IE bug trying to render CSS3 bits...

Answer 6

This worked for me. I am not sure if you have the same problem as me. I was getting slight white borer just around the corners.

background-clip: padding-box;