Html 带背景图像的glitchy Behavior div，镀铬边框半径

我在chrome中遇到了一些问题

我正在尝试使用一个

div

，它具有

边框半径

，一个

背景图像

，一个

边框

和

溢出：隐藏

在该div中有某种覆盖，必须被父div的

溢出：隐藏
和
边界半径
属性“掩盖”

这是可行的，但我看到覆盖div和父div的
边框之间的
背景图像的精细边框

有解决办法吗


正文{
背景色：黑色；
}
.圆圈{
背景图像：url（'http://www.augustaga.gov/images/pages/N1617/Black%20tupelo%20-%20照片%201.jpg'）；
宽度：250px；
高度：250px；
位置：绝对位置；
背景尺寸：封面；
背景位置：中心；
边界半径：50%；
边框：2倍纯白；
溢出：隐藏；
}
.覆盖{
顶部：150px；
位置：绝对位置；
高度：100px；
宽度：100%；
背景色：白色；
文本对齐：居中；
}

文本
请尝试以下操作：

您需要删除边框：2px纯白；
表格。圈出班级

因此，它应该是：

.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;
}

尝试添加
背景剪辑：填充框到你的.circle类

-webkit-background-clip: padding-box; 
-moz-background-clip:    padding; 
background-clip:         padding-box;

删除边框没有帮助。谢谢你的回答，帕斯卡。添加您提供的线条会使锯齿状边框变小，但不会完全删除它。