glitchy behaviour div with background image, border radius in Chrome - html

Question

I'm encountering some glitchy behaviour in chrome.
I'm trying to have a div with a border-radius, a background-image, a border and overflow:hidden.
Within that div is some kind of overlay that has to be 'masked' by the overflow:hidden and border-radius properties of the parent div.
This works but I'm seeing a fine border of the background-image between the overlay div and the border of the parent div.
Is there a workaround for this?
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;
}
<div class="circle">
<div class="overlay"> text</div>
</div>

Answer 1

Try adding background-clip: padding-box; to your .circle class
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
Source

Answer 2

Please try this:
You need to remove the border :2px solid white;
form .circle class.
so it should be:
.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;
}