Multicolor border can be achieved using HTML and CSS combination . It can be easily created using multiple li HTML elements and then customizing them with small CSS code. In this tutorial we are using 10 li elements for 10 different colors. You can increase or decrease this number according to your choice. This multi color border can be used to stylize header menus, widget boxes, footers etc. You can see the below given screenshot for output of the given code.

Multi Color Border Using CSS

HTML Code

<div class='sg-container'>
<ul class='sg-multicolor'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1> This is the example of multicolor border using list elements</h1>
</div>

CSS

* {
margin:0;
padding:0;
}

.sg-container
{
width:800px;
height:300px;
margin:200px auto;
border:1px solid #dcdcdc;
}

.sg-container h1
{
margin-top:50px;
padding:40px;
color:#333;
font-family:Arial;
}

.sg-multicolor {
list-style:none;
width:100%;
font-size:0;
}

.sg-multicolor li {
display:inline-block;
width:10%;
height:8px;
}

.sg-multicolor li:nth-child(1) {
background:#CDDC39;
}

.sg-multicolor li:nth-child(2) {
background:#29B6F6;
}

.sg-multicolor li:nth-child(3) {
background:#FF5722;
}

.sg-multicolor li:nth-child(4) {
background:#651FFF;
}

.sg-multicolor li:nth-child(5) {
background:#FFEB3B;
}
.sg-multicolor li:nth-child(6) {
background:#4CAF50;
}

.sg-multicolor li:nth-child(7) {
background:#DD2C00;
}

.sg-multicolor li:nth-child(8) {
background:#FFC107;
}

.sg-multicolor li:nth-child(9) {
background:#558B2F;
}

.sg-multicolor li:nth-child(10) {
background:#311B92;
}

Leave a Reply

Your email address will not be published. Required fields are marked *