css--内凹圆角

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

:root {
　　--r: 2em;
}
.box {
　　overflow: hidden;
　　position: relative;
　　margin: .25em auto;
　　min-width: 15em;
　　max-width: 15em;
　　min-height: 10em;
　　border-radius: 1em;
}
.box:before {
　　position: absolute;
　　margin: calc(var(--r) * -1);
　　padding: var(--r);
　　border-radius: 50%;
　　box-shadow: 0 0 0 300px rgba(33,33,33,0.4);
　　-webkit-box-shadow: 0 0 0 300px rgba(33,33,33,0.4);

　　content: '';

}

效果如下：