CSS animations to give a div a rainbow border, perpetually changing color

rainbow-border.css

@-webkit-keyframes rainbow {
  0% {border-color: hsl(0, 100%, 50%);}
  100% {border-color: hsl(255, 100%, 50%);}
}

.rainbow_border{
  border: 4px solid hsl(0, 100%, 50%);
  -webkit-animation: rainbow 5s infinite alternate;
}

Used for "color" property, thanks.

@-webkit-keyframes rainbow {
  0% {color: hsl(0, 100%, 50%);}
  100% {color: hsl(255, 100%, 50%);}
}

.rainbow-color {
  -webkit-animation: rainbow 5s infinite alternate;
}

It only seems to be cycling through red and blue.

I gave it more colors based on a seven-color rainbow. This makes it seem more so like a rainbow
Found: Here

@-webkit-keyframes rainbow {
  0% {border-color: hsl(0, 100%, 50%);}
  14% {border-color: hsl(30,100%,50%);}
  28% {border-color: hsl(60,100%,50%);}
  42% {border-color: hsl(120,100%,50%);}
  56% {border-color:  hsl(240,100%,50%);}
  70% {border-color: hsl(280,100%,50%);}
  84% {border-color: hsl(320,100%,50%);}
  100% {border-color: hsl(255, 100%, 50%);}
}

then increased the time

border: 2px solid hsl(0, 100%, 50%);
-webkit-animation: rainbow 10s infinite alternate;