实现弯曲的div边框

Question

我用黄线提到过。我只是想让我的 div 的边框像这样：

Answer 1

<div class="main">
  <img src="img.jpg" alt="">
  <div class="box"></div>
</div>

.main {
    width: 200px;
    height: 150px;
    position: relative;
}
img {
    z-index: 2;
}
.box {
    width: 200px;
    height: 50px;
    border: #ff0 3px solid;
    position: relative;
    top: 50px;
    z-index: 10;
}