Border-radius не работает с border-image [дубликат] ⇐ CSS

[Anonymous]

Сейчас у меня есть анимация границы. Это работает хорошо, но мне бы хотелось, чтобы оно было закругленным.
https://codepen.io/Mohamed-Mojtobai/pen/poBVPoK
Когда я пытаюсь использовать border-radius он не округляется.

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

@property --angle {
syntax: '';
initial-value: 90deg;
inherits: true;
}

@property --gradX {
syntax: '';
initial-value: 50%;
inherits: true;
}

@property --gradY {
syntax: '';
initial-value: 0%;
inherits: true;
}

:root {
/* border anim */
--angle: 90deg;
--c1: #14f5db;
--c2: #053e37;
}

.animated-border {
border: 1px solid;
border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
animation: borderRotate 2500ms linear infinite forwards;
}

@keyframes borderRotate {
100% {
--angle: 420deg;
}
}

button {
width: 120px;
height: 80px;
border-radius: 12px;
}

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

Thanks

Помогите мне, пожалуйста!

Подробнее здесь: https://stackoverflow.com/questions/783 ... rder-image