CSS - Circle Border with Various Colors

Circle with three different border colors

You can achieve a circle border divided into 3 sections with an inline svg using:

a circle element
and the stroke-dasharray attribute to make the sections

Here is an example:

svg{width:30%;height:auto;}

<svg viewbox="0 0 10 10">

  <defs>

    <circle id="circle" cx="5" cy="5" r="4" stroke-width="0.5" fill="transparent" />

  </defs>

  <use xlink:href="#circle" stroke="pink" stroke-dasharray="0,2.09,8.38,30" />

  <use xlink:href="#circle" stroke="green" stroke-dasharray="0,10.47,8.38,30" />

  <use xlink:href="#circle" stroke="orange" stroke-dasharray="2.09,16.75,6.3" />

</svg>

CSS circle with two borders of different colors or at least looks like

Hi u can make this also :

.container {
    background-color: grey;
    height: 200px;
    padding:10px; // ADD THIS ALSO
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}

the advantage is that you can also put a blur effect, changing like this:

box-shadow: 0 0 3px 3px #002525;

Create a two color circle

Here is a working snippet of what I'll do, using border:

% values instead of px for border-radius, it simplifies a lot!
border-color to add the correct color for each side.
transform: rotate(45deg); to turn it like you want.

body{

  background: #ccc;

}

.halves-circle{

  background: #fff;

  height: 200px;

  width: 200px;

  border: 20px solid;

  border-radius: 50%;

  border-color: green green red red;

  transform: rotate(45deg);

}

<div class="halves-circle">

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>

CSS: Circle with half one color and the other half another color?

A linear-gradient will do that, and use border-radius to make it a circle.

div {

  width: 50vw;

  height: 50vw;

  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% ); 

  border-radius: 50%;

}

<div></div>

Adding border with 2 colors to circular image

This can be achieved with a little trickery, wrapping your image in a container. The border-radius property is a bit misleading, so you have to think of the four sides and see how you can create the same effect.

First you should ensure you have the dual-border effect in place.

.image-border {

  display: inline-block; /* Fits the wrapper to the size of the image */

  overflow: hidden; /* Keeps the image inside the container */

  border-radius: 50%;

  border-width: 8px;

  border-style: solid;

  border-color: red red blue blue; /* Define colosr for top, right, bottom, and left sides */

}

.image-border > img {

  display: block; /* Prevent baseline alingment (space below image) */

}

<div class="image-border">

  <img src="https://via.placeholder.com/175" alt="img=1" />

</div>