CodePen Embed - Border image backdrop

<h1>Border image backdrop</h1>

<h2>Navigation item backdrop</h2>

<ul class="__nav__">
  <li><a href="#">Link1</a>
    <div>
      <ul>
        <li><a href="#">Link1-1</a></li>
        <li><a href="#">Link1-2</a></li>
        <li><a href="#">Link1-3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">Link2</a>
    <div>
      <ul>
        <li><a href="#">Link2-1</a></li>
        <li><a href="#">Link2-2</a></li>
        <li><a href="#">Link2-3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">Link3</a>
    <div>
      <ul>
        <li><a href="#">Link3-1</a></li>
        <li><a href="#">Link3-2</a></li>
        <li><a href="#">Link3-3</a></li>
      </ul>
    </div>
  </li>
</ul>

<h2>Table cell backdrop</h2>

<div class="__table__hover-mask-cell">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-mask-cross">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-mask-row">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-mask-col">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-color-row">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-color-col">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="__table__hover-color-cross">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
      </tr>
      <tr>
        <th>2</th>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
      </tr>
      <tr>
        <th>3</th>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
    </tbody>
  </table>
</div>

* {
  box-sizing: border-box;
  line-height: var(--line-height, calc(1em + 1rem));
}
body {
  & {
    background: #fff;
    color: #202020;
    font-family: sans-serif;
    margin: auto;
    padding: 16px;
    max-inline-size: 768px;
  }
  & > * {
    margin: 0;
  }
  & > * + * {
    margin-block-start: max(32px, 2rem);
  }
}
[class*="__nav__"] {
  & {
    border: none;
    border-image: linear-gradient(#e0e0e0, #e0e0e0) 0 10000 / 0 10000px / 0
      10000px;
    display: flex;
    column-gap: 1px;
    padding: 0;
    padding-inline: 1px;
  }
  & li {
    display: block;
  }
  & > li {
    background: #e0e0e0;
    flex: 0 1 100%;
    position: relative;
  }
  & > li:focus-within,
  &:not(:focus-within) > li:hover {
    border-image: linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)) 10000 /
      10000px / 10000px;
    z-index: 2;
  }
  & li a {
    color: inherit;
    display: block;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    text-decoration: none;
  }
  & > li > a {
    font-weight: bolder;
    text-align: center;
  }
  & li:is(:hover, :focus-within) > a {
    background: rgb(0, 0, 0, 0.125);
  }
  & > li > div {
    background: #f0f0f0;
    display: grid;
    grid: 0fr / 100%;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    transition: grid-template-rows 0.25s;
  }
  & > li:focus-within > div,
  &:not(:focus-within) > li:hover > div {
    grid-template-rows: 1fr;
  }
  & li div ul {
    padding: 0;
  }
  & li > div > ul {
    overflow: hidden;
  }
}
[class*="__table__"] {
  & {
    --border: solid 1px color-mix(in srgb, transparent, currentcolor 25%);
    border: var(--border);
    border-radius: 4px;
    max-block-size: 80dvb;
    overflow: auto;
  }
  & > table {
    border: hidden;
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: 40rem;
    table-layout: fixed;
  }
  & > table > * > tr > * {
    border: var(--border);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    position: relative;
    text-align: inherit;
  }
  & > table > * > tr > ::before,
  & > table > * > tr > ::after {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  & > table > * > tr > :hover {
    z-index: 1;
  }
}
.__table__hover-mask-cell > table > * > tr > td:hover::before {
  border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 10000 /
    10000px / 10000px;
  content: "";
}
.__table__hover-mask-cross > table > * > tr > td:hover::before {
  border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 100% /
    10000px / 10000px;
  content: "";
}
.__table__hover-mask-row > table > * > tr > td:hover {
  &::before {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 100% /
      10000px / 10000px;
    content: "";
  }
  &::after {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125))
      10000 0 / 10000px 0 / 10000px 0;
    content: "";
  }
}
.__table__hover-mask-col > table > * > tr > td:hover {
  &::before {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 100% /
      10000px / 10000px;
    content: "";
  }
  &::after {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 0
      10000 / 0 10000px / 0 10000px;
    content: "";
  }
}
.__table__hover-color-row > table > * > tr > td:hover::before {
  border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 0
    10000 fill / 0 10000px / 0 10000px;
  content: "";
}
.__table__hover-color-col > table > * > tr > td:hover::before {
  border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 10000
    0 fill / 10000px 0 / 10000px 0;
  content: "";
}
.__table__hover-color-cross > table > * > tr > td:hover {
  &::before {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125)) 0
      10000 / 0 10000px / 0 10000px;
    content: "";
  }
  &::after {
    border-image: linear-gradient(rgb(0, 0, 0, 0.125), rgb(0, 0, 0, 0.125))
      10000 0 fill / 10000px 0 / 10000px 0;
    content: "";
  }
}

This Pen is owned by nov on CodePen.

See more by @numerofive on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.