How to put border color as Linear Gradient on Table Row's border?

user_12477894 0
Viewed 483

I'm trying to put the table row's border color as linear gradient. The table codes are below:

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}

td {
 padding-left: 4%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
}

I'm aware that I might need to put separately on first,last child as well as on the td class.

The following code I've tried on the table data(td) but no luck. This code fills up the inner table data background instead of border color.:

td {
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 100px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

Expected output: Expect Output

html-table css
1 Answers

Please try this,

This is a demo for the table,

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}
td {
 text-indent:5%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 50px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Dalton</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

user_133686580
Related