Table header with rounded corners and border

Question

Is it possible for a table header to have rounded corners and a 1px border?

When I apply a border to the th elements, the border corners are square instead of round.

table {
  border-collapse: collapse;
}

th {
  background: cyan;
  border: 1px solid;
}

th:first-child {
  border-radius: 10px 0 0 0;
}

th:last-child {
  border-radius: 0 10px 0 0;
}

td {
  border: 1px solid;
}

<table>
  <tr><th>Col 1</th><th>Col 2</th></tr>
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

Answer 1

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