I would like to know how I could create a border top of different colors. Place the reference image below. 
I would like to know how I could create a border top of different colors. Place the reference image below.
It could be done with the function: linear-gradient ()
.color {
position: relative;
width: 500px;
}
.color:before {
content: "";
background-image: -webkit-linear-gradient(0deg, blue 0, blue 100px, green 100px, green 200px, purple 200px, purple 300px, orange 300px, orange 400px, red 400px);
background-image: -ms-linear-gradient(0deg, blue 0, blue 100px, purple 100px, purple 200px, green 200px, green 300px, orange 300px, orange 400px, red 400px);
background-size: 500px;
position: absolute;
left: 0px;
right: 0px;
height: 5px;
}<div class="color"></div>This would be a way to do it:
.line div {
border: 1px solid;
float: left;
}
#red {
border-color: red;
}
#green {
border-color: green;
}
#purple {
border-color: purple;
}<div class="line">
<div id="red" style="width:30%;"></div>
<div id="green" style="width:30%;"></div>
<div id="purple" style="width:30%;"></div>
</div> If you are using CSS3 you could use the border-image property along with the linear-gradient function.
Simply, you would have to indicate the direction the linear-gradient will take, in this case, from left to right, and assign the ranges that each color will have. For the first and last color it is not necessary to indicate its start or end respectively.
Example:
.divPersonalizado {
width: 300px;
height: 300px;
border-top: 5px solid;
border-image: linear-gradient(to right, blue 20%, green 20%, green 40%, purple 40%, purple 60%, orange 60%, orange 80%, red 80%) 1;
}<div class="divPersonalizado">
Este div tiene un borde de color arcoiris
</div>