Border radius can't be applied to my HTML table - html

Question

I made a HTML table with columns headers as tabs. I want to apply border-radius to my table rows on both sides. But I don't know exactly how to apply. Though I tried but it didn't work at all. I have white color space between each row as well using white border. I have also applied blue left border to my each row. I want to curve its top and bottom corners. And also want to apply round corners to the right side of rows.
Actually this is what I am trying to achieve:
Left side
Right side
Also when you zoom in webpage, the blue border on left hand is touched to each other. Why? In normal view, its fine.
#tbstud {
width:700px;
margin:50px auto;
border-collapse:collapse;
}
.column_heading {
background-color:#d9e5f0;
border-left:1px solid #ffffff;
border-radius:5px 5px 0 0;
color:#000;
font-weight:bold;
height:20px;
line-height:20px;
padding:10px;
text-align:center;
}
.customer_row td {
padding:15px;
border-left:1px solid #ffffff;
}
.customer_row {
background-color:#f5f7f9;
border-bottom:1px solid #e5e9ee;
border-left:3px solid #2585fe;
border-top:2px solid #fff;
color:#545454;
border-radius:5px;
}
#tbstud .customer_row:nth-child(2) {
border-top:none;
}
#tbstud .customer_row:last-child {
border-bottom:none;
}
<table id="tbstud">
<tr>
<th>Sr. No.</th>
<th class="column_heading">Roll No.</th>
<th class="column_heading">Name</th>
<th class="column_heading">Class</th>
<th class="column_heading">Address</th>
</tr>
<tr class="customer_row">
<td>1</td>
<td>101</td>
<td>Sam</td>
<td>MSc</td>
<td>Delhi</td>
</tr>
<tr class="customer_row">
<td>2</td>
<td>102</td>
<td>Amit</td>
<td>BCA</td>
<td>Mumbai</td>
</tr>
<tr class="customer_row">
<td>3</td>
<td>103</td>
<td>Rahul</td>
<td>BCA</td>
<td>Delhi</td>
</tr>
<tr class="customer_row">
<td>4</td>
<td>104</td>
<td>Neha</td>
<td>BA</td>
<td>Pune</td>
</tr>
<tr class="customer_row">
<td>5</td>
<td>105</td>
<td>Pooja</td>
<td>B.Tech.</td>
<td>Chandigarh</td>
</tr>
</table>

Answer 1

You can try this code..
#tbstud {
width:700px;
margin:50px auto;
border-collapse:collapse;
}
.column_heading { background-color:#d9e5f0;
border-left:1px solid #ffffff;
border-radius:5px 5px 0 0;
color:#000;
font-weight:bold;
height:20px;
line-height:20px;
padding:10px;
text-align:center;
}
.customer_row td {border-left:1px solid #ffffff;}
.customer_row td span{
display: block;
padding:15px;
background-color: #f5f7f9;
}
.customer_row {
border-bottom:1px solid #e5e9ee;
border-top:2px solid #fff;
color:#545454;
border-radius:5px;
}
.customer_row td:first-child span{ border-left:3px solid #2585fe;border-radius: 4px; }
.customer_row td:last-child span{border-radius: 4px;}
#tbstud .customer_row:nth-child(2) {
border-top:none;
}
#tbstud .customer_row:last-child {
border-bottom:none;
}
<table id="tbstud">
<tr>
<th>Sr. No.</th>
<th class="column_heading">Roll No.</th>
<th class="column_heading">Name</th>
<th class="column_heading">Class</th>
<th class="column_heading">Address</th>
</tr>
<tr class="customer_row">
<td><span>1</span></td>
<td><span>101</span></td>
<td><span>Sam</span></td>
<td><span>MSc</span></td>
<td><span>Delhi</span></td>
</tr>
<tr class="customer_row">
<td><span>2</span></td>
<td><span>102</span></td>
<td><span>Amit</span></td>
<td><span>BCA</span></td>
<td><span>Mumbai</span></td>
</tr>
<tr class="customer_row">
<td><span>3</span></td>
<td><span>103</span></td>
<td><span>Rahul</span></td>
<td><span>BCA</span></td>
<td><span>Delhi</span></td>
</tr>
<tr class="customer_row">
<td><span>4</span></td>
<td><span>104</span></td>
<td><span>Neha</span></td>
<td><span>BA</span></td>
<td><span>Pune</span></td>
</tr>
<tr class="customer_row">
<td><span>5</span></td>
<td><span>105</span></td>
<td><span>Pooja</span></td>
<td><span>B.Tech.</span></td>
<td><span>Chandigarh</span></td>
</tr>
</table>

Answer 2

.bordered {
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 1px #CCCCCC;
}
table {
border-spacing: 0;
width: 600px;
margin: 30px;
}
.bordered th:first-child {
border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
}
.bordered th:last-child {
border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
}
.bordered td:first-child, .bordered th:first-child {
border-left: medium none;
}
.bordered th {
background-color: #DCE9F9;
background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
border-top: medium none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.bordered td, .bordered th {
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 10px;
text-align: left;
}
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
Please refer this:
Border Radius of Table is not working

Answer 3

.customer_row td:first-child {
border-left:3px solid #2585fe;
border-radius:5px;
display: block;
}

Answer 4

Just use border-collapse: separate; on the table and set the border radius and blue left border on the first td of every tr (tr td:first-child {}).