css - 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 "WHY USE US" li button....

The combination of border-radius, background-image and border: 1px solid #colour seems to be creating this odd horrid effect.

Anyone know of a solution to fix?

CSS of the LI is:

background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;

Answer 1

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;