glitchy behaviour div with background image, border radius in Chrome
<p>I'm encountering some glitchy behaviour in chrome. </p>

<p>I'm trying to have a <code>div</code> with a <code>border-radius</code>, a <code>background-image</code>, a <code>border</code> and <code>overflow:hidden</code>. </p>

<p>Within that div is some kind of overlay that has to be 'masked' by the <code>overflow:hidden</code> and <code>border-radius</code> properties of the parent div. </p>

<p>This works but I'm seeing a fine border of the <code>background-image</code> between the overlay div and the <code>border</code> of the parent div. </p>

<p>Is there a workaround for this?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  background-color:black;
  }

.circle{
  background-image: url('http://www.augustaga.gov/images/pages/N1617/Black%20tupelo%20-%20photo%201.jpg');
  
  width: 250px;
  height: 250px;
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid white;
  overflow:hidden;
  
  
}
.overlay{
  top: 150px;
  position: absolute;
  height : 100px;
  width: 100%;
  background-color:white;
  text-align: center;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;
  &lt;div class="overlay"&gt; text&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>