CSS3背景雕刻或半径问题

Question

我正在尝试在CSS中创建背景雕刻。请看下面的图片。

如何在CSS3中添加这样的半径？有人可以帮忙吗？

Answer 1

使用：

border-top-left-radius: 50%;
border-top-right-radius: 50%;

我在这里做了一个例子：http://jsfiddle.net/DFs6H/2/

Answer 2

在底部添加另一个带有边框半径的div。

HTML：

<div class="content">
    <div class="bottom_border"></div>
</div>

的CSS：

.content{
    background:#CCC;
    height:100px;
    width:100px;
    position:relative;
   overflow:hidden
}
.bottom_border {
    position:absolute;
    top:0;
    bottom:0;
    background:#FFF;
    width:100px;
    height:20px;
    top:90px;
    bottom:-10px;
    border-radius: 50%
}