Perché il raggio del bordo non arrotonderà l'effettivo stile del bordo?

Question

Questo è stato testato in Chrome, FF e IE 10 e si comportano tutti allo stesso modo, quindi non penso che sia un bug, ma piuttosto qualcosa che sto facendo di sbagliato/non a conoscenza.

Ecco quello che vedo:

Ecco il 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); 
} 

E il CSS del div genitore:

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

Come leggere il CSS rivela, il il calendario attuale è un elemento <table> ed è quello elemento che ha lo stile di confine, non il genitore.

Nota che sto usando PIE, ma questo non interessa a questa domanda poiché questo comportamento proviene da browser completamente compatibili con CSS3.

La mia unica ipotesi è che questa nuova regola CSS non giochi bene con le tabelle?

Nota Irrilevante:

si prega di ignorare i colori del calendario terribili. Sono atm casuali.

Answer 1

border-collapse: separate dovrebbe risolvere questo problema:

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

probabilmente si vorrà border-spacing: 0; così da evitare qualsiasi spaziatura aggiuntiva causata da non crollare le frontiere.

Edit: vostro violino aggiornamento: http://jsfiddle.net/dMen8/4/

Answer 2

È necessario aggiungere anche il raggio del bordo alle celle della tabella.

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