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

Question

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:

Could you please add relevent html code? – Rayees AC Sep 07 '20 at 06:42 — Rayees AC, Sep 07 '20 at 06:42

Rayees AC · Answer 1 · 2020-09-07T09:43:02.257

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>

Thanks for your response. I've added a screenshot. Please check. My HTML code is identical with your one, so it's fine. Btw, I want the gradient to stay only on the border radius like the screenshot. — Mehedi, Sep 07 '20 at 09:30

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

1 Answers1