I need to apply different border-color for each slick slider item with 5 colors staring with red, i tried the code below it does not work, it applies only the first color to all items when I apply slick-slider to it.

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

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

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

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