Different border-color for each flexbox item

Question

How can I add different border-color for flexbox items. The flex items will be added dynamically, 5 different border-colors has to be applied to the items. The flexbox items need to start with the border-color red, then the next flexbox item with border-color orange, yellow, pink, green, and then start with the red and repeat the same border-color order again.

I tried nth-child but it does not start with the color red again.

.slider {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

.slider > div {
    height: 50px;
    width: 50px;
    background-color: blue;
  }

.slider > div:nth-child(1n+0) {
  border: 5px solid red;
}
.slider > div:nth-child(2n+0) {
  border: 5px solid orange;
}
.slider > div:nth-child(3n+0) {
  border: 5px solid yellow;
}
.slider > div:nth-child(4n+0) {
  border: 5px solid pink;
}
.slider > div:nth-child(5n+0) {
  border: 5px solid green;
}

<div class="slider">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
  <div></div> 
</div>