仅显示由边框半径设置的圆形图像上的边框部分

Question

我有一张图像，使用border-radius进行了舍入，并为现在的圆形图像应用了边框。我只想在图像的上半部分（或特定部分）上显示边框。

这是一个jsfiddle我嘲笑过要证明我要做的事情。正如您所看到的，我不想在图像上显示水平线以下部分的边框。

我已经使用了各种border / border-radius属性但未能找到一种方法可以实现这一目标 - 但肯定有可能吗？

我在下面的上下文中包含了该场景的屏幕截图，以便更清楚地了解我是如何让它看起来的。

编辑 - 解决方法解决方案

我设法使用@Alvaro Menéndez's answer提出了一个解决方法来实现我的目标（见下面的截图）......虽然这不是最漂亮的解决方案，但我希望能够控制这个仅从纯CSS3边框属性。

对我有用的代码是： -

.page-header {
  /*max-width: 1260px;*/
  width: 100%;
  padding: 0 30px;
  height: 160px;
  border-bottom: 4px solid #9c1559;
  display: block;
  position: relative;
}

.page-header:after {
  content:"";
  position:absolute;
  height:120px;
  background-color:#fff;
  width:100%;
  bottom:-124px;
  left:0;
}

Answer 1

如果您的背景颜色是纯色而不是图像，我会尝试使用此解决方案：http://jsfiddle.net/r8Lpqzz1/1/

它只是添加了一个伪元素来覆盖你需要的区域：

.nav-primary {
display: block;
margin: 5px;
position:relative;
}
.nav-primary:after {
content:"";
position:absolute;
height:60px;
background-color:#fff;
width:250px;
bottom:-65px;
left:0;