How to apply border radius to <tr> in bootstrap?

Question

I need a row should be of rounded corners and a spacing between row-row.So,far I tried table table-curved class as below. Any suggestions/modifications would be helpful.

My CSS -

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved tr {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-radius: 26px;
    border-collapse:seperate;
    border-spacing:5em;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

My HTML -

<table class="table table-curved">
   <thead>
    <tr>
     <th>Schedule Time</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Telephone</th>
     <th>Status</th>
     <th>Contact Score</th>
     <th>Last Contacted</th>
     <th>Device Type</th>
    </tr>
 </thead>
    <tbody>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
 </tbody>
</table>

To be more specific I need a row looks similar to image here

Answer 1

you can use :before in first column:

Here i created a example for you:

.table-curved {
    border-collapse: separate;
    width:100%;
    border-spacing:0px;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}


.table-curved tr {
    position: relative;
    border-radius: 26px;
    border-collapse:seperate;
    border-spacing:0;
    background:#f8f8f8;
    backgrnoud-position-x: 10px;
    padding:10px 0;
    transition:background .1s;
}
.table-curved tr:hover {
    background:#eee;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

.table-curved td:first-child:before {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 6px 0 0 6px;
    position: absolute;
}
.table-curved td.red:before {
    background:red;
}
.table-curved td.green:before {
    background:green;
}
.table-curved td.blue:before {
    background:blue;
}
.table-curved td.orange:before {
    background:orange;
}
.table-curved td:first-child{
    padding-left: 15px;
}
.table-curved td{
    position: relative;
    border-bottom: 10px solid white;
    border-spacing: 0px;
    padding: 10px;
}

Answer 2

You can try border-radius on td and th. Check below example to get started.

1. Adjust the border-radius as required.
2. Add class to tr to have desired background-color

Approach 1: A solution using pseudo element :before

.table-curved {
  border-collapse: collapse;
  margin-left: 10px;
}
.table-curved th {
  padding: 3px 10px;
}
.table-curved td {
  position: relative;
  background-color: #e5e5e5;
  padding: 6px 10px;
  border-bottom: 2px solid white;
  border-top: 2px solid white;
}
.table-curved td:first-child:before {
  content: '';
  position: absolute;
  border-radius: 8px 0 0 8px;
  background-color: coral;
  width: 12px;
  height: 100%;
  left: -12px;
  top: 0px;
}
.table-curved td:last-child {
  border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td {
  background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child:before {
  background-color: cornflowerblue;
}
.table-curved tr.green td:first-child:before {
  background-color: forestgreen;
}

<table class="table table-curved">
  <thead>
    <tr>
      <th>Schedule Time</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Telephone</th>
      <th>Status</th>
      <th>Contact Score</th>
      <th>Last Contacted</th>
      <th>Device Type</th>
    </tr>
  </thead>
  <tbody>
    <tr class="green">
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
    </tr>
    <tr>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
    </tr>
    <tr class="blue">
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
      <td>.</td>
    </tr>
  </tbody>
</table>

Approach 2: A solution with adding extra/empty cell in each row.

.table-curved {
  border-collapse: collapse;
}
.table-curved th {
  padding: 3px 10px;
}
.table-curved th:first-child {
  padding: 6px;
}
.table-curved td {
  background-color: #e5e5e5;
  padding: 6px 10px;
  border-bottom: 2px solid white;
  border-top: 2px solid white;
}
.table-curved td:first-child {
  padding: 6px;
  border-radius: 8px 0 0 8px;
  background-color: coral;
}
.table-curved td:last-child {
  border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td:not(:first-child) {
  background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child {
  background-color: cornflowerblue;
}
.table-curved tr.green td:first-child {
  background-color: forestgreen;
}

<table class="table table-curved">
  <tr>
    <th></th>
    <th>S.No</th>
    <th>Title</th>
    <th>Cost</th>
  </tr>
  <tr class="blue">
    <td></td>
    <td>1</td>
    <td>Title one</td>
    <td>$18.0</td>
  </tr>
  <tr>
    <td></td>
    <td>2</td>
    <td>Title two</td>
    <td>$23.4</td>
  </tr>
  <tr class="green">
    <td></td>
    <td>3</td>
    <td>Title three</td>
    <td>$40.5</td>
  </tr>
</table>

Answer 3

You cannot apply border radius to table row, instead you can add border-radius to TD, here is example

'http://jsfiddle.net/theazureshadow/LRKXD/1/'