border-radius on <th>. No border rounding

Question

I have css looks like that:

#caltable th {
    border: solid 1px #333;
    border-radius: 7px;
    background: #f00;
}

But this is what i've got in browser (Chrome/FF):

The question is how to get black line also rounded?

Answer 1

Change border-collapse:collapse to border-collapse:separate on the <table>.

You should also add support for browsers which are not at the newwest version:

-moz-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;
-webkit-border-radius: 7px;