title: IE Workaround? border-radius + background-color + border = bleeding background
body: <p>It seems something like this has been addressed before, but most of what I'm finding is for the more generic issue that doesn't pertain to most browsers today. I'm encountering the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037/" rel="nofollow">known IE issue</a> where using <code>border-radius</code> with a border and a background (a color in my case) results in the background <em>bleeding</em> beyond the border.</p>
  
  <p>I'm wondering if there is a workaround that actually can mask this issue... Some of the things I've tried:</p>
  
  <ul>
  <li><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=10" /></code></li>
  <li><code>overflow:hidden</code> on the parent</li>
  <li><code>background-clip:border-box</code></li>
  <li>adding .1 to the <code>border-radius</code></li>
  </ul>
  
  <p>None of these have worked. Is there another workaround (other than "use images") while I wait for yon IE team to fix things?</p>
  
  <p>I've created <a href="https://jsfiddle.net/chrissigler/4o440k5b/" rel="nofollow">a fiddle</a> that illustrates this well and documents what I've found in more detail.</p>