title: ie11 broken background image on rounded corners
body: <p>JsFiddle example:
  <a href="http://jsfiddle.net/Q5AjL/" rel="nofollow noreferrer">http://jsfiddle.net/Q5AjL/</a>
  Screenshot from jsfiddle in ie11, dev mode off:
  <img src="https://i.stack.imgur.com/QRgv3.png" alt="enter image description here"></p>
  
  <p>Screen shot from my actual site:
  <img src="https://i.stack.imgur.com/mTmkD.png" alt="enter image description here"></p>
  
  <p>Has anyone seen this before? In ie11 some of the borders have this strange broken affect.</p>
  
  <p>It seems that the semi transparent image is breaking around the rounded corners. How on earth can i fix this? Sigh.. ie.. you are the pain in the side of my web design life.</p>
  
  <pre><code>.small-card{
      border-radius: 5px;
      display: inline-block;
      width: 100%;
      max-width: 400px;
      margin-bottom: 25px;
  }
  .trans{
      background-image: url(/png/transparent/white/40_percent.png);
      background-repeat: repeat;
      border: solid 1px #fff;
  }
  </code></pre>
  
  <p>This is ie11. When i turn on devloper mode the issue vanishes! So confusing.</p>
  
  <p><img src="https://i.stack.imgur.com/YRP4K.png" alt="enter image description here"></p>
  
  <p>I really don't understand what is going on. And as above, as soon as i turn on developer mode the issue disappears. It only occurs where there is a rounded corner involved.</p>