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 规则不能很好地处理表格？

无关注释:

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

Answer 1

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

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

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

编辑: 您的 fiddle 已更新:http://jsfiddle.net/dMen8/4/