Two Color Borders

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>

Double border with different color

Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:

body {  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);  background-repeat: no-repeat;  height: 100vh;}.double-border {  background-color: #ccc;  border: 4px solid #fff;  padding: 2em;  width: 16em;  height: 16em;  position: relative;  margin: 0 auto;}.double-border:before {  background: none;  border: 4px solid #fff;  content: "";  display: block;  position: absolute;  top: 4px;  left: 4px;  right: 4px;  bottom: 4px;  pointer-events: none;}

<div class="double-border">  <!-- Content --></div>

How to create border bottom with 2 different color?

You can use css pseudo classes i.e :after or :before.

h3 {  margin: 0;  padding-bottom: 7px;  position: relative;  border-bottom: 2px solid #ccc;}
h3:before {  position: absolute;  background: brown;  height: 2px;  content: '';  width: 50px;  bottom: -2px;  left: 0;}

<h3>Last Recent Post</h3>

How to create a dashed border with two alternating colours?

Built on Yadab's answer, adding a pseudo element to fix the vertical border.

Basically you create a line with repeating-linear-gradient and set it to border-image.

:root {
  --border-size: 2px;
  --box-width: 36em;
  --box-height: 8em;
  --dash-size: 1em;
}

.box,
.box::after {
  height: var(--box-height);
  width: var(--box-width);
  border: solid;
}

.box {
  border-image: repeating-linear-gradient( to right, red 0, red var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 2), blue calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
  border-image-slice: 16;
  border-image-width: var(--border-size) 0;
}

.box::after {
  content: "";
  top: 0;
  position: absolute;
  border-image: repeating-linear-gradient( to bottom, blue 0, blue  var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) * 2), red calc(var(--dash-size) * 2), red calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 3), transparent calc(var(--dash-size) * 4));
  border-image-slice: 16;
  border-image-width: 0 var(--border-size);
}

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

Half colored border on top and bottom using CSS

Use pseudo ::before and ::after on h1 tag along-with linear-gradient as background use height instead of border to get that styling,

header {  text-align: center;  background-color: #7f7f7f;}
h1{  color: #00a2e8;  font-size: 40px;  padding: 5px 0;  display: inline-block;  position:relative;}h1:before{  content:"";  width:100%;  height:3px;  left:0;  top:0;  position:absolute;  z-index:9;  background:linear-gradient(to right, white 50%, brown 50%);}h1:after{  content:"";  width:100%;  height:3px;  left:0;  bottom:0;  position:absolute;  z-index:9;  background:linear-gradient(to right, brown 50%, white 50%);}

<header>  <h1>HEADER</h1></header>

How to use two colors for border?

You can use :before pseudo class for 25% red border...adjust the position of red border using position values.

Stack Snippet

body {  margin: 0;}
.myclass {  border-right: 15px solid green;  height: 100vh;  position: relative;}
.myclass:before {  content: "";  border-right: 15px solid red;  position: absolute;  right: -15px;  bottom: 0;  height: 25%;}

<div class="myclass">  Content content content</div>

Adding a double border to a linear-gradient-filled-div colors the border too

You can manipulate box-shadow property... you can have more than one!

.colors {  width: 100px;  padding: 10px;  height: 50px;  background: linear-gradient(white, orange);  box-shadow:    inset 0 0 0 2px black,    inset 0 0 0 8px white,    inset 0 0 0 10px black;}

<div class="colors"></div>