<div class="square surface with-border-gradient"></div>
<div class="circle surface with-border-gradient"></div>
<div class="square with-border-gradient"></div>
<div class="circle with-border-gradient"></div>

body {
    gap: 16px;
    padding: 16px;
    margin: 0;
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    align-items: center;
    background-image: url(https://unsplash.com/photos/twukN12EN7c/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUxNTY4Nzg1&force=true&w=1920);
    background-size: cover;
    background-position: 50% 50%;
}

.square {
    width: 100px;
    height: 100px;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.surface {
    background-color: #222222;
}

/* Only for rect */
/* .with-border-gradient {
    border-image-width: 5px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: conic-gradient(from calc(var(--border-rotate, 0) * 1deg), red, cyan, yellow, red);
} */

/* https://dev.to/afif/border-with-gradient-and-radius-387f */
.with-border-gradient {
    --border-rotate: 0;
    --border-width: 5px;

    position: relative;
    margin: calc(var(--border-width) / 2);
    box-sizing: border-box;
}

.with-border-gradient::before {
    position: absolute;
    inset: calc(var(--border-width) * -0.5);
    padding: var(--border-width);
    border-radius: inherit;
    background: conic-gradient(from calc(var(--border-rotate, 0) * 1deg), red, cyan, yellow, red);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    content: '';
}

const elements = document.querySelectorAll('.with-border-gradient');

const steps = Array.from({ length: 360 }, (_, index) => ({ '--border-rotate': index }));
const options = { duration: 1000, iterations: Infinity };

elements.forEach(element => element.animate(steps, options));