CSSで線を内側に湾曲させる方法

.sample {
  border-radius: 2px;
  margin: 0 auto;
  width: 300px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 50% 5%;
  border-top-right-radius: 50% 5%;
}
.sample:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -5%;
  left: -5%;
  height: 10px;
  background: #fff;
  -webkit-clip-path: ellipse(50% 60% at 50% 100%);
  clip-path: ellipse(50% 60% at 50% 100%);
}

<div class="sample">
    <div class="curved"></div>
</div>