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

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;还希望避免因不折叠边框而导致的任何额外间距。

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