凹边界半径可以吗？

这是一个简单的凸示例。

http://jsfiddle.net/swY5k/

#test{
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}

但是，我想要一个凹形边界半径。

我尝试将边界半径设置为负值，但这不起作用。

凹/凸示例：

您可以在背景上使用径向渐变来给人凹形边框的印象。例如，这样的事情：

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

请注意，大多数 webkit 浏览器仍然需要径向渐变的前缀，如果您想完全支持旧版浏览器，您可能还需要实现旧版渐变语法。