How to Create Multi-Color Border With Css

How to create multi-color border with CSS?

You can do it with :after or :before psuedo element and css linear-gradient as shown below:

body {  background: #ccc;}
.box {  text-align: center;  position: relative;  line-height: 100px;  background: #fff;  height: 100px;  width: 300px;}
.box:after {  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);  position: absolute;  content: '';  height: 4px;  right: 0;  left: 0;  top: 0;}

<div class="box">Div</div>

Multi color border for table Cell

Because both normal cell and multicolor cell use the same border property to achieve the border look and feel, one must overwrite the other. If you need 2 border for multicolor cell, you may transfer one border to another element. Since there is a requirement (without using additional markup), we can make use of the psuedo element to host the multicolor border. Thus all cell will have thin black border and multicolor cell will have an additional thick multicolor bottom border.

table {
  border-collapse: collapse;
}

td {
  position: relative;
  /* normal thin borders for every cell */
  border: 1px solid black;
}

/* let the psuedo element host the multi-color border, so it wont be overritten by normal td */
td.multiColor:after {
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
  /* psuedo element positioning */
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  /* tell the borowser its border width is included with its element size, so it will not overlap with td border */
  box-sizing: border-box;
}

<table>
  <tr>
    <td>normal cell</td>
    <td class='multiColor'>multi color</td>
  </tr>
  <tr>
    <td class="multiColor">multi color</td>
    <td>normal cell</td>
  </tr>
</table>

How do I put a multi color border around my circular image?

Here's an example using a little more markup and pseudo elements:

.image-wrap {  position: relative;  padding: 6px;  border-radius: 50%;  width: 140px;  height: 140px;  box-sizing: border-box;  overflow: hidden;  background: blue;  z-index: 1;  background-clip: padding-box;}
.image-wrap-inner {  overflow: hidden;  border-radius: 50%;  width: 128px;  height: 128px;}
.image-wrap img {  position: relative;  z-index: 10;  top: -6px;  left: -6px;}
.img-border-two::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: green;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}
.img-border-three::before {  content: '';  display: block;  height: 140px;  width: 140px;  background: purple;  position: absolute;  top: 0;  left: 0;  z-index: 3;  transform: matrix(2, 1, 2, -1, 0, 140);}
.img-border-three::after {  content: '';  display: block;  height: 140px;  width: 140px;  background: red;  position: absolute;  top: 0;  left: 70px;  z-index: 2;}

<div class="col-lg-4">  <div class="image-wrap img-border-two">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

<div class="col-lg-4">  <div class="image-wrap img-border-three">    <div class="image-wrap-inner">      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">    </div>  </div>
  <h2>Heading</h2>  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>

How to create a multi-colored border?

You can use pseudo-elements ::before and ::after to achieve that:

.box {  position: relative;  background: #66d;  width: 60px;  height: 60px;  border-radius: 50%;  border: 6px solid #ddd;}
.box::before, .box::after {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: -6px; /* width of the border */  border-radius: 50%;  border: 6px solid transparent;  content: '';}
.box::before {  border-top-color: #bbb;  transform: rotate(45deg);   /* 45deg to start right on top */}
.box::after {  border-right-color: #bbb;   /* You can color the borders you want… */  /* transform: rotate(0deg); /* … and adjust the rotation if needed */}

<div class="box"></div>

How to set multi-color border using border-image and linear-gradient?

The issue is that percentages are relative to the element not the border which will make the 20% bigger than 5px.

You need to consider pixel values. You also need to start from the bottom because the top reference is also the top of the element:

a {  color: #707070 !important;  font-size: 20px;  text-decoration: none;  margin-right: 50px;  border-bottom: 5px solid;  border-image:     linear-gradient(to top, #707070 1px, #a4c0e9 1px, #a4c0e9 4px, #707070 4px) 5;}

<a>A link element</a>

How to create border-bottom with Multiple Different Colors?

There are several options:

Option 1

.box {  border-bottom: 5px solid red;  position: relative;}
.box:after {  content: '';  position: absolute;  bottom: -10px;  height: 5px;  background: blue;  left: 0;  right: 0;  width: 100%;}
.box:before {  content: '';  position: absolute;  bottom: -15px;  height: 5px;  background: yellow;  left: 0;  right: 0;  width: 100%;}

<div class="box">  </div>

How to Create Multi-Color Border With Css