Why isn't the border radius rounded to the actual border style?

Question

This has been tested in Chrome, FF, and IE 10, and they all behave the same, so I don’t think this is some kind of error, but rather what I am doing wrong / don’t know.

Here is 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 CSS div:

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

As CSS shows, the actual calendar is a <table> element and this is an element that has a border style, not a parent.

Please note that I use PIE, but that hardly matters for this question, as this behavior comes from browsers that are fully CSS3 compatible.

My only suggestion is that this new CSS rule does not work well with tables?

Inappropriate note:

Please ignore the awful colors of the calendar. They are random atm.

Answer 1

border-collapse: separate should fix this:

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

You will probably need border-spacing: 0; to avoid unnecessary intervals caused by not dropping borders.

Edit: Updated your script: http://jsfiddle.net/dMen8/4/

Answer 2

You also need to add the border radius to the table cells.

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