Border radius doesn't work at table - css

Question

The border-radius at table work only on background and border remain straight.
This is my css
.table_mem, .th_mem, .tr_mem, .td_mem{
border: 1px solid #000000;
border-radius: 20px;
border-collapse: collapse;
text-align: center;
padding: 7px;
}
.th_mem{ background-color: #9e9e9e;}
.tr_mem{ background-color: #e5e5e5; transition: .5s;}
.tr_mem:hover{ background-color: #bfbfbf; }
Someone can say me a solution?

Answer 1

The borders are straight because of collapsing, simple set border-collapse to separate:
body { padding-top: 1em; }
.table_mem,
.table_mem thead th,
.table_mem tbody tr,
.table_mem tbody td {
border: 1px solid #000000 !important;
border-radius: 20px;
border-collapse: separate;
text-align: center;
padding: 7px;
}
.table_mem thead th {
background-color: #9e9e9e;
}
.table_mem tbody tr {
background-color: #e5e5e5;
transition: .5s;
}
.table_mem tbody tr:hover {
background-color: #bfbfbf;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table table_mem">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
jsfiddle: https://jsfiddle.net/azizn/kkv9guhx/