SOURCE

<div class="box">
    <div class="wrap"></div>
</div>

<div class="box active">
    <div class="wrap"></div>
</div>

body{background: #ccc}


.box{
    position: relative;
    width:345px;
    height: 144px;
    border-radius: 13px;
    background: radial-gradient(circle at 0% 65%, transparent 6%, #fff 6.2%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 65%, transparent 6%, #fff 6.2%) no-repeat right / 51% 100%;
    padding: 1px;
    margin-bottom: 10px;
}
.wrap{
    position: relative;
    width:100%;
    height: 100%;
    border-radius: 12px;
    background: radial-gradient(circle at -.75% 65.3%, transparent 6.8%, #fff 7%) no-repeat left / 51% 100%,radial-gradient(circle at 100.75% 65.3%, transparent 6.8%, #fff 7%) no-repeat right / 51% 100%;
}
.wrap::before {
    content:"";
    width: 92%;
    height: 1px;
    border-top: 2px dotted #F0F0F0;
    position: absolute;
    left: 4%;
    top: 65%;
    pointer-events: none;
}

/* 选中状态 */
.box.active{
    background: radial-gradient(circle at 0% 65%, transparent 6%, #6C7B91 6.5%) no-repeat left / 51% 100%,radial-gradient(circle at 100% 65%, transparent 6%, #6C7B91 6.2%) no-repeat right / 51% 100%;
}

.box.active .wrap::after {
    content:"";
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 12px 13px 0 0;
    background: linear-gradient(0deg, #fff, #EEF2FF);

}