CSS 边框向内弯曲

I want to build the container with bended borders inside the element. Is it possible to do using only css? If it is container can should have auto height

你可以尝试这个方法 - 在你的div之前和之后绘制一个带有圆角边框的div

CSS:

#bend-inside{
    width: 500px;
    overflow: hidden;
}

#box-before{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
   right: 550px;
    top: -200px;
    overflow: hidden;
}

#box{
    background-color: #e5e5e5;
    width: 400px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    right: 200px;
}

#box-after{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    right: -350px;
    top: -200px;
    overflow: hidden;
}

HTML:

<div id="bend-inside">
    <div id="box-before"></div>
    <div id="box"></div>
    <div id="box-after"></div>
</div>

Example