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

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;