如何在背景图片上创建圆圈叠加？

Question

如何在背景图片上创建圆圈？我尝试使用border-radius，但是它使半径从图像的顶部开始。

<section class="herobanner"></section>

.herobanner {
   background: url(img/img.jpg);
   height: 100vw;
   border-radius: 0px 0px 300px 300px;
}

我想要：example