SOURCE

<div class="container">
  <div class="top"></div> 
  <div class="bottom"></div>
</div>

.container{
  display:inline-block;
  width: 400px;
  margin-left: 200px;
}
.top{
 background-image: linear-gradient(to right , #82AFFB, #4B83FA);
  height: 100px;
  position: relative;
}

.top::before {
    content: '';
    position: absolute;
    height: 10px;
    left:0 ; 
    right: 0;
    bottom: -10px;
    background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
    background-size: 20px 10px;
}
.bottom{
  height: 200px;
  background: #fff;
  border-top: 2px dashed #6593F7;
}