I’m trying to create a block like this –

I can’t manage to do it.
Please help, here’s the codepen

Code from codepen:

<div class="custom-border custom-border-light">
  test
</div>
<div class="custom-border custom-border-light" style="height: 700px">
  test 2, more height
</div>

body {
  background-color: #201E2C;
  padding: 50px;
  display: flex;
  align-items: flex-start;
}

.custom-border {
  background-color: #333;
  color: #fff;
  position: relative;
  border-radius: 8px;
  padding: 10px;
  width: 540px;
  height: 500px;
  margin: 0 20px;
}

.custom-border::before {
    display: block;
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    z-index: 10;
    border-radius: inherit;
    padding: 1px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-mask-composite: xor;
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.custom-border-light::before {
    background: linear-gradient(156.15deg, rgba(254, 254, 254, 0.18) 5.68%, rgba(152, 152, 152, 0) 107.95%);
}

I’ve searched in google but couldn’t find a solution. Exporting this SVG shape from the design and setting it as a background won’t work because the block’s height can vary. Also can’t round the edges if I’ll use clip-path.