Необычная форма со скругленными углами и градиентной каймой. ⇐ CSS

[Anonymous]

Я пытаюсь создать такой блок —


У него закругленные углы с градиентом. Средняя часть блока должна растягиваться в зависимости от высоты, а верхняя и нижняя части с закругленными углами должны оставаться неизменными. Также внутри этого блока будет контент, например текст.
У меня не получается, вот код.
Код из codepen:

Код: Выделить всё

.custom-border {
background-color: rgba(217,217,217, .05);
position: relative;
border-radius: 16px;
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%);
}

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

Код: Выделить всё

test

test 2, more height

what I'm trying to do

Я искал в Google, но не нашел решения. Экспортировать эту фигуру SVG из дизайна и установить ее в качестве фона не получится, поскольку высота блока может меняться, а SVG не будет растягиваться должным образом. Также невозможно скруглить края, если я буду использовать clip-path.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ent-border