Rounded gradient border

by Alex

HTML

<div class="circle">Test</div>

CSS

body {
    padding: 20px;
}
.circle {
    width: 100%;
    height: 200px;
    background: white;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}
.circle::before {
    content: '';
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    padding: 10px;
    width: 100%;
    height:100%;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
    
    background: linear-gradient(226deg, #00ffbd, #8d00ff, #63e9ff, #df8040);
background-size: 800% 800%;

-webkit-animation: AnimationName 4s ease infinite;
-moz-animation: AnimationName 4s ease infinite;
animation: AnimationName 4s ease infinite;
    
}



@-webkit-keyframes AnimationName {
    0%{background-position:7% 0%}
    50%{background-position:94% 100%}
    100%{background-position:7% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:7% 0%}
    50%{background-position:94% 100%}
    100%{background-position:7% 0%}
}
@keyframes AnimationName { 
    0%{background-position:7% 0%}
    50%{background-position:94% 100%}
    100%{background-position:7% 0%}
}