Table header with rounded corners and border

Question

I s it possible for table headers to have rounded corners AND a 1px border?

When I apply a border it doesn't apply to to the rounded corners, but to the actual table border, so the border corners are square.

How can I do this?

Here's the CSS:

.example th {
border: 1px solid #ddd;
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top,  #eee,  #ddd);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd');
color: #444;
    }

The rounded corners are applied to first and list child th: -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;

Solution

This makes all table headers (if you are using semantic th cells instead of body td cells) have rounded corners, but if you wish it for only selected tables - then rename the class to table.rounded th and just add rounded class to those tables:

th
{ 
-khtml-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: solid 1px black;
}

EDIT: you need to have border-collapse: separate; on your table for this to be possible...