I can't apply a round border on table cells - html

Question

I'm building a very basic test website in HTML, and I'm learning how to put borders on table cells. I have a problem, I'm trying to round the borders in my table but I just get rounded cells (td and th), but not the table itself.
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
border-collapse: collapse;
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
I even tried doing the following to see if there were any changes:
table {
border-radius: 45px;
}
the,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
font-family: arial;
padding: 11px;
}
But all the borders remain squares.

Answer 1

I think that has something to do with collapsing the border.
Try to remove this line
border-collapse: collapse;
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
/* border-collapse: collapse; *//* remove this line */
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
Then use padding and margin to control the spacing if needed