Dlaczego promień zaokrąglenia nie dopełnia faktycznego stylu granicznego?

Question

Zostało to przetestowane w Chrome, FF i IE 10 i wszystkie zachowują się w ten sam sposób, więc nie sądzę, że to jakiś błąd, ale raczej coś, co robię źle/nie wiem.

Oto, co widzę:

Oto 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); 
} 

i rodzica div CSS:

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

jak czytanie CSS ujawnia, aktualny kalendarz to element <table> i to jest to element mający styl graniczny, a nie rodzica.

Zauważ, że używam PIE, ale to nie ma znaczenia dla tego pytania, ponieważ to zachowanie pochodzi z przeglądarek w pełni kompatybilnych z CSS3.

Domyślam się, że ta nowa reguła CSS nie działa dobrze w przypadku tabel?

Nieistotne Uwaga:

Proszę ignorować straszne kolory kalendarza. Są to losowe atm.

Answer 1

border-collapse: separate powinno rozwiązać ten problem:

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

prawdopodobnie będziesz chciał border-spacing: 0; jak również w celu uniknięcia dodatkowego odstępu spowodowanych przez nie zawaleniem granic.

Edit: Twój skrzypce aktualizacja: http://jsfiddle.net/dMen8/4/

Answer 2

Musisz również dodać promień obramowania do komórek tabeli.

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