Why won't border-radius round off the actual border-style?

Question

This was tested in Chrome, FF, and IE 10 and they all behave the same way, so I don't think it is some bug, but rather something I am doing wrong/not aware of.

Here's what I see:

Here is the 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);
}

And the parent div's CSS:

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

As reading the CSS reveals, the actual calendar is a <table> element and it is that element that has the border-style, not the parent.

Note that I am using PIE, but that hardly matters to this question since this behavior is coming from browsers fully compatible with CSS3.

My only guess is that this new CSS rule doesn't play well with tables?

Irrelevant Note:

Please ignore the dreadful calendar colors. They are random atm.

Answer 1

border-collapse: separate should fix this:

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

You'll probably want border-spacing: 0; as well to avoid any extra spacing caused by not collapsing borders.

Edit: Your fiddle updated: http://jsfiddle.net/dMen8/4/

Answer 2

You need to add border radius to the table cells as well.

.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 */ 
}

EDIT:

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