title: IE11 border radius and border bug
body: <p>I have an odd visual bug in IE11 as you can see in image here > </p>
  
  <p><a href="https://i.stack.imgur.com/zwsU5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zwsU5.png" alt=""></a><br>
  <sub>(source: <a href="http://www.jonwallacedesign.biz/ie11.png" rel="nofollow noreferrer">jonwallacedesign.biz</a>)</sub>  </p>
  
  <p>See the odd effect on corners of the white "WHY USE US" <code>li</code> button....</p>
  
  <p>The combination of <code>border-radius</code>, <code>background-image</code> and <code>border: 1px solid #colour</code> seems to be creating this odd horrid effect.</p>
  
  <p>Anyone know of a solution to fix?</p>
  
  <p>CSS of the <code>LI</code> is:</p>
  
  <pre><code>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;
  </code></pre>