Как применить границу-радий с пограничным изображением (градиентная граница) на кнопке, помещенной на градиент/видео ⇐ Html

[Anonymous]

< /p>


.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 32px;
height: 54px;
font: normal normal 600 16px/21px "Inter", sans-serif;
letter-spacing: 0;
color: #ffffff;
text-decoration: none;
margin-block: 40px 0px;

border: 2px solid transparent;
border-radius: 32px; /* Rounded corners */
border-image: linear-gradient(
90deg,
#9DFF71,
#FFD88D,
#FF76D5,
#55BEFF
) 1;

background: transparent;
transition: all 0.3s ease;
}

.cta-btn:hover {
text-decoration: none;
background: #17303949 0% 0% no-repeat padding-box;
color: #ffffff;
}< /code>

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

[url=#]
Gradient border with transparent background
[/url]

Что я попробовал :

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

Using `border-image` with `border-radius`

Использование фонового изображения: линейно-градиент (белый, белый), линейно-градиент (справа, зеленое, золото); для маскировки
Что я ожидал:
Градиент должна уважать округлые углы и все еще допустить фон контейнера (видео/выпускник), чтобы показать. На самом деле произошло:
Углы остаются острыми, а маскировка с твердыми цветами скрывает мой фон контейнера.

Подробнее здесь: https://stackoverflow.com/questions/797 ... tton-place