仅剪辑图像背景/圆角CSS

Question

我在网站设计中有一部分我无法实现如何更好地实现。

这是页面的一部分。您可以根据指南（引导网格）查看内容的位置。 最重要的部分是底部和顶部的圆形边框。

我曾尝试使用border属性，但无法获得所需的结果。

有没有办法只使用CSS实现以下效果，不使用现代浏览器功能，如剪辑，画布...... ，以支持移动浏览器。
或者只能从图形编辑器中以适当的形状导出背景？

如果有任何帮助，我将不胜感激。

Answer 1

这是我能得到的最接近的：

＆＃13;

＆＃13;

div {
  position:absolute;
  left:40px;
  top:40px;
  width:500px;
  height:300px;
  border-radius:100%/20px;
  background: blue url(https://placeimg.com/500/300/any);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;