Round corner in Table - html

Question

I need to create a table with two columns and the first column, the cells only have a bottom border, where the cells in the second column have borders all around with round corner for the top and bottom.
My code looks like this, and work in Explorer, but in Firefox and Chrome it gives me round corner border plus normal corners:
table {
border-collapse: collapse;
width: 50%;
font-family: Proxima Nova, Arial;
}
.h1 {
/*Head cell red*/
text-align: center;
border: 1px solid #D81541;
border-radius: 20px 20px 0px 0px;
background-color: #D81541;
color: white;
font-size: 1.5em;
font-weight: bold;
width: 60%;
}
.td1 {
/*right column cells*/
border: 1px solid #6D6E70;
text-align: left;
width: 60%;
}
.td2 {
/*left column cells bold*/
border-bottom: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
.td3 {
/*last cell right column*/
border: 1px solid #6D6E70;
border-radius: 0px 0px 20px 20px;
text-align: left;
width: 60%;
}
.td4 {
/*last cell left column*/
vertical-align: top;
font-weight: bold;
}
<table>
<tr>
<td class="td2"></td>
<td class="h1">My top corners should be round</td>
</tr>
<tr>
<td class="td2">bla</td>
<td class="td1">blabla</td>
</tr>
<tr>
<td class="td4">last row</td>
<td class="td3">my bottom corners should be round</td>
</tr>
</table>

Answer 1

Just remove border-collapse: collapse; from .table & add border-spacing:0 to it
Check the snippet. with thanks to #Abhitalks for his previous fiddle.
table {
border-spacing: 0;
width: 50%;
font-family: Proxima Nova, Arial;
}
.h1 {
/*Head cell red*/
text-align: center;
border: 1px solid #D81541;
border-radius: 20px 20px 0px 0px;
background-color: #D81541;
color: white;
font-size: 1.5em;
font-weight: bold;
width: 60%;
}
.td1 {
/*right column cells*/
border: 1px solid #6D6E70;
text-align: left;
width: 60%;
}
.td2 {
/*left column cells bold*/
border-bottom: 1px solid #6D6E70;
border-top: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
.td3 {
/*last cell right column*/
border: 1px solid #6D6E70;
border-radius: 0px 0px 20px 20px;
text-align: left;
width: 60%;
}
.td4 {
/*last cell left column*/
vertical-align: top;
font-weight: bold;
border-top: 1px solid #6D6E70;
}
.td5 {
/*left column first cells*/
border-bottom: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
<table>
<tr>
<td class="td5"></td>
<td class="h1">My top corners should be round</td>
</tr>
<tr>
<td class="td2">bla</td>
<td class="td1">blabla</td>
</tr>
<tr>
<td class="td4">last row</td>
<td class="td3">my bottom corners should be round</td>
</tr>
</table>

Answer 2

Have you tried this?
td
{
border-radious:0px;
}