为什么边界半径不会使实际的边界风格变得圆滑？

Question

这是在Chrome，FF和IE 10中测试的，它们的行为都是一样的，所以我不认为这是一些错误，而是我做错了/不知道的事情。

这就是我所看到的：

这是CSS：

table#calendarTable
{
    border: 2px inset #888;
    width: 100%;
    margin: auto;
    background-color: #61915f;
    border-collapse: collapse;
    text-align: center;
    border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -ms-border-radius: 25px 25px 25px 25px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    -ms-user-select: none;
    behavior: url(/Resources/PIE.htc);
}

父div的CSS：

div.calendarWrapper
{
    width: 100%;
    height: 215px;
}

正如阅读CSS所揭示的那样，实际的日历是一个<table>元素，它是具有边框样式的元素，而不是父元素。

请注意，我正在使用PIE，但这对此问题几乎不重要，因为此行为来自与CSS3完全兼容的浏览器。

我唯一的猜测是这个新的CSS规则不适合表格吗？

无关紧要注意：

请忽略可怕的日历颜色。它们是随机的。

Answer 1

border-collapse: separate应该解决这个问题：

http://jsfiddle.net/pLgMr/2/

您可能也希望border-spacing: 0;避免因不折叠边框而导致的任何额外间距。

修改：您的小提琴已更新：http://jsfiddle.net/dMen8/4/

Answer 2

您还需要为表格单元格添加边框半径。

.myOneCell td {
    -moz-border-radius: 25px;
    -webit-border-radius: 25px;
    border-radius: 25px; /* The version without prefix should always come last because it isthe approved version */ 
}

编辑：

.numerousCellTable tr:first-child td:first-child {
    border-radius: 25px 0 0 0;
}
.numerousCellTable tr:first-child td:last-child {
    border-radius: 0 25px 0 0;
}
.numerousCellTable tr:last-child td:first-child {
    border-radius: 0 0 25px 0;
}
.numerousCellTable tr:last-child td:last-child {
    border-radius: 0  0 0 25px;
}