I tried a workaround using the pseudo elements :before and :after on the thead th:first-child and thead th:last-child

In combination with wrapping the table with a <div class="radius borderCCC">

see jsFiddle

Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.

I tried a workaround using the pseudo elements :before and :after on the thead th:first-child and thead th:last-child

In combination with wrapping the table with a <div class="radius borderCCC">

table thead th:first-child:before{ content:" "; position:absolute; top:-1px; left:-1px; width:15px; height:15px; border-left:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:5px 0px 0px; } table thead th:last-child:after{ content:" "; position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-right:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:0px 5px 0px 0px; } 

see jsFiddle

Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.