Border radius can't be applied to my HTML table

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>

Manas Mondal · Accepted Answer · 2019-12-16T11:46:36.130

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>

But, working for me after adding reset css. I think getting something wrong. — Manas Mondal, Dec 16 '19 at 11:43

score 0 · Answer 2 · answered Dec 16 '19 at 08:35

.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

score 0 · Answer 3 · answered Dec 16 '19 at 08:41

0

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

answered Dec 16 '19 at 08:41

Testas Testauskas

82
2
10

score 0 · Answer 4 · answered Dec 16 '19 at 08:42

0

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 {}).

answered Dec 16 '19 at 08:42

Julian

81
7

Border radius can't be applied to my HTML table

4 Answers4