How to Add Border Radius on Table Row

How to add border radius on table row

You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Add border radius on table row

You need to add the border-radius directly to the table cells (first and last child):

 ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:first-child {
   border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;
 }

  ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:last-child {
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
 }

How to apply border radius to tr in bootstrap?

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

Adjust the border-radius as required.
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>

CSS3 border-radius on display:table-row element

I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.

If you remove the background color from the table rows, and you can add this:

.item > div {
  background-color: #ccc;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
}

.item > div:last-child {
  border-radius: 0 10px 10px 0; 
  -moz-border-radius: 0 10px 10px 0;
}

It will work even if you change your class names.

You can see it in action here:
http://jsfiddle.net/jaSs8/1/

Border radius and border together in a table td

try border-collapse: inherit; and make 'border-spacing: 0px;'

table {  width: 100%;  border-collapse: inherit;  table-layout: fixed;  text-align: center;  font: 13px Verdana;  border-radius: 30px;  border-spacing: 0px;}
table td {  border: 1px solid #000000;  padding: 20px;  background: red;  color: #ffffff;  border-left: none;}table td:first-child{  border-left: 1px solid #000000;}table tbody tr:first-child td:first-child {  border-radius: 20px 0 0 0;}
table tbody tr:first-child td:last-child {  border-radius: 0 20px 0 0;}

<table>  <tr>    <td>One</td>    <td>Two</td>    <td>Three</td>  </tr></table>

Boder radius and shadow for table row

Apply the border radius to the table rows like this, which will remove the ugly corners:

.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

This will make all 4 corners of the row have a radius of 10px. In your example, you applied the box shadow to the table row, and therefore the shape of the shadow will be the shape of the element it is applied on, which was originally a rectangle. Applying border-radius: 10px; to the table row will change the shape of the row elements and thus also change the shape of the shadow that they produce.

Also, I can see your logic when applying the borders to the data cell elements, but the way you've done it is unnecessary, and you could simply apply border: 1px solid #d1d1d1; to the table row element or .tr-body class.

Style a table row with background color and border radius

tr td:first-child { 
  border-top-left-radius: 150px; 
  border-bottom-left-radius: 150px; 
}
  
tr td:last-child { 
  border-top-right-radius: 150px; 
  border-bottom-right-radius: 150px; 
}

td {
  padding: 12px;
  background-color: yellow;
  border: solid 0px #000;
}

table {
  border-collapse: collapse;
}

<table>
  <tfoot>
    <tr>
      <td class="d-inline-block ltr font-14 font-weight-bold"> Price:    </td>
      <td class="text-right text-primary"> 1600$ </td>
    </tr>
  </tfoot>
</table>

CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

    table tr:last-child td:first-child {
        border: 2px solid orange;
        border-bottom-left-radius: 10px;
    }
    
    table tr:last-child td:last-child {
        border: 2px solid green;
        border-bottom-right-radius: 10px;
    }

<table>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        4
      </td>
    </tr>
  </tbody>
</table>

How to Add Border Radius on Table Row