Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes 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 {
padding-left: 4%;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
I am mindful that I may need to specify separately for the first and last child as well as within the td class.
Despite my efforts on the table data (td), the code below does not achieve the desired result. It fills up the inner table data background rather than applying the 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 outcome: https://i.sstatic.net/ZKLVt.jpg