How to apply a gradient to a table row border?

Question

On the header i used a pseudo-element to create this gradient border. This is my code:

.wrapper::before {
    z-index: 1000;
    content: "";
    position: absolute;
    height: 106px;
    inset: 0;
    border-radius: 20px;
    padding: 2px; 
    background:linear-gradient(90deg,#4757e370,#5b2bdf70); 
  }

Now i want the same gradient on my table row borders. How can i achieve this? Somehow i can't apply pseudo-elements on my td-childs. Sadly there is no way known to me on how to apply gradients on borders. Somebody knows how to do it?

Thanks :)

Answer 1

You can do something very similar to what you have done with pseudo elements if that's working for you. You just have to set the tr elements to display as block

:root {
  --bg-color: hsl(231deg 23% 11%);
}

body {
  background-color: var(--bg-color);
}

table {
  outline: 1px solid blue;
  width: 100%;
}

tr {
  --br: 20px;
  --border-size: 4px;
  
  display: block;
  height: 1rem;
  margin: 0.7rem;
  position: relative;
  border-radius: var(--br);
  background-color: var(--bg-color);
}

tr::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border-size));
  border-radius: var(--br);
  background:linear-gradient(90deg,#4757e370,#5b2bdf70); 
}

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
<table>

It's worth checking out this question as well which might provide a more in depth explanation.

It's also worth mentioning, when I am creating tables I rarely rely on table styling anymore, and will usually default to using a grid layout style and this makes gaps and the sort much more manageable.