/*                                                */
/*     <div class="gradient-borders"></div>       */
/*                                                */

.gradient-borders {
  border: double 10px transparent;
  border-radius: 40px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  -webkit-animation: changecolour 2s infinite;
	animation: changecolour 2s infinite;
}

@keyframes changecolour
{
    0% {background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ff0000,#5020ff);}
    12% {background-image: linear-gradient(white, white), radial-gradient(circle at top, #ff0000,#5020ff);}
    25% {background-image: linear-gradient(white, white), radial-gradient(circle at top right, #ff0000,#5020ff);}
    37% {background-image: linear-gradient(white, white), radial-gradient(circle at right, #ff0000,#5020ff);}
    50% {background-image: linear-gradient(white, white), radial-gradient(circle at bottom right, #ff0000,#5020ff);}
    62% {background-image: linear-gradient(white, white), radial-gradient(circle at bottom, #ff0000,#5020ff);}
    75% {background-image: linear-gradient(white, white), radial-gradient(circle at bottom left, #ff0000,#5020ff);}
    87% {background-image: linear-gradient(white, white), radial-gradient(circle at left, #ff0000,#5020ff);}
    100% {background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ff0000,#5020ff);}
}