Unable to change the border radius of <thead>, <tr> elements - html

Question

How can I change the radius of thead and tr element? I want my table to have rounded corners but border-radius is not working for thead and tr but its works for the element itself. Here is the CSS.
table{
width:100%;
border-radius:5px;
background:gray;
}
thead {
border-radius:5px;
text-align:left;
background:blue;
}
tr{
border-radius:5px;
}
th,td{
padding:5px;
}
Here is the HTML.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andy</td>
<td>UK</td>
<td>40</td>
</tr>
</tbody>
<tbody>
</table>

Answer 1

This is fairly easy to do. You need to add the border radius to the correct corners of the first and last th in the row rather than the thead like this:
th:nth-child(1) {
border-radius: 5px 0px 0px 0px;
}
th:nth-last-child(1) {
border-radius: 0px 5px 0px 0px;
}
Here is a full code snippet:
table{
width:100%;
border-radius:5px;
background:gray;
}
tr{
border-radius:5px;
}
th,td{
padding:5px;
}
th{
text-align:left;
background:blue;
color: #fff;
}
th:nth-child(1) {
border-radius: 5px 0px 0px 0px;
}
th:nth-last-child(1) {
border-radius: 0px 5px 0px 0px;
}
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andy</td>
<td>UK</td>
<td>40</td>
</tr>
</tbody>
<tbody>
</table>

Answer 2

radius needs to be in a th or td so i'd do something like this:
table{
width:100%;
border-radius:5px;
background:gray;
border-collapse: separate;
}
table th {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align:left;
background:blue;
}
table td{
border-radius:5px;
}
th,td{
padding:5px;
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andy</td>
<td>UK</td>
<td>40</td>
</tr>
</tbody>
<tbody>
</table>

Answer 3

You need to add "th" in the css. Then you have to use "border-radius".
thead th{
border-radius: 10px 10px 10px 10px;
text-align:left;
background:blue;
}
Add "border-radius" in td too.
td{
border-radius: 10px 10px 10px ;
background-color: red;
}