html - 为什么border-radius 不会使实际的边框样式四舍五入？

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;
}