CSS：从矩形到圆形的内部

如何创建圆角侧（而不是角）以使内部圆角？ 我想在上面画一个白色的圆圈，但我想一定有更干净的方法

我试过这个，但结果是：

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
}

应该是这样的：

---

坦白地说，我认为我们需要使用另一个div来制作它，因为用css来绘制这样的div曲线是不可能的

请参考以下代码：

HTML

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

下面是上述代码的一个示例（其工作正常：）

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
    position:relative;
}
.box1 {
    background: white none repeat scroll 0 0;
    border-radius: 50% / 0.75em;
    bottom: -1px;
    height: 2em;
    position: absolute;
    width: 30em;
}