Creating a multi coloured border is bit complicated for the beginners. Hopefully this tutorial will help them out. Though I am calling it a rainbow like border, it can have more than seven colors. You can add as many colors as you want. I am sharing this tutorial only to give you an idea about rainbow border, it will be better if you experiment more.
In order to create this rainbow border I have used the CSS linear gradient property. I won't discuss about CSS gradient property here in this tutorial, I will come up with a new article on this topic soon . If you are not familiar with CSS gradient properties than you can read this article on CSS-tricks
My implementing this CSS you can easily have a rainbow border at the bottom of a particular div element.
If you are interested in showing the rainbow border at the top of a section then simply do the following changes.
Screenshot of multi coloured border
In order to create this rainbow border I have used the CSS linear gradient property. I won't discuss about CSS gradient property here in this tutorial, I will come up with a new article on this topic soon . If you are not familiar with CSS gradient properties than you can read this article on CSS-tricks
The HTML used
The html markup used in this tutorial<body>
<div id="box">
</div>
</body>
The CSS used
Following is the CSS used in this tutorial. I have used pseudo class after to create the rainbow border, also used the absolute position, giving it a position zero from left, right and bottom.#box{margin: 40px auto; background-color:#3a3a3a; width: 50%; height: 100px; position: relative;}
#box:after {
content: "";
position: absolute;
left: 0px;
right:0px;
bottom: 0px;
height: 7px;
background-image: -webkit-linear-gradient(0deg, #F78181 40px, #BEF781 40px, #BEF781 70px,#58ACFA 70px, #58ACFA 100px, #9b59b6 100px,#9b59b6 130px,#BDBDBD 130px,#BDBDBD 160px,#F3F781 160px,#F3F781 190px,#58FAD0 190px,#58FAD0 220px,#FE642E 220px,#FE642E 250px,#DA81F5 250px,#DA81F5 280px,#886A08 280px,#886A08 310px,#088A29 310px,#088A29 340px);
background-size: 340px;
}
My implementing this CSS you can easily have a rainbow border at the bottom of a particular div element.
If you are interested in showing the rainbow border at the top of a section then simply do the following changes.
#box:after ---> #box:before
bottom:0px; ---> top:0px;
bottom:0px; ---> top:0px;