How to create a multi-colored border?

Question

How to create a border that is uneven and multicolored similar to the below image ?

Possible duplicate of [CSS Progress Circle](https://stackoverflow.com/questions/14222138/css-progress-circle) — Vucko, Jun 11 '18 at 05:12

Takit Isy · Accepted Answer · 2018-06-11T15:35:03.850

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>

Note that you could make more borders visible if you need.

Hope it helps.

Thanks this is awesome – Flying Gambit Jun 11 '18 at 13:39 — Flying Gambit, Jun 11 '18 at 13:39

score 1 · Answer 2 · answered Jun 11 '18 at 12:13

You can use gradient to create this:

.box {
  width:100px;
  height:100px;
  border-radius:50%;
  background:
   radial-gradient(circle at center, blue 60%,transparent 60.1%),
   linear-gradient(to right,#fff 50%,transparent 0),
   linear-gradient(50deg,#fff 50%,transparent 0),
   red;
}

<div class="box">

</div>

How to create a multi-colored border?

2 Answers2