Circle with Two Borders

Circle with two borders

I'd suggest, with the following HTML:

<div></div>

The CSS:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

div {  width: 20em;  height: 20em;  border-radius: 50%;  background-color: red;  border: 4px solid #fff;  box-shadow: 0 0 0 5px red;}

<div></div>

CSS circle with double border

You can try :after to make 2 border for circle:

.green{  width: 300px;  height: 300px;  background-color: green;  display: flex;  align-items: center;  justify-content: center;}
.circle {  position: relative;  width: 150px;  height: 150px;  border: 1px solid #fff;  border-radius: 50%;}
.circle::after {  content: '';  width: 150px;  height: 150px;  border: 1px solid #fff;  border-radius: 50%;  display: block;  margin: -4px 2px;}

<div class="green">  <div class="circle"></div></div>

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;

How to create multiple borders around existing border of circle

You can use a simple border and clip the background to the content-box to create the transparent part in the padding area:

div.circle {  background: rgba(255, 255, 255, .5) content-box;  padding: 10px;  height: 180px;  width: 180px;  box-sizing: border-box;  border-radius: 50%;  margin:10px auto;  border: 10px solid rgba(255, 255, 255, .5);}
body {  background: pink;}

<div class="circle"></div>

How to add a second border around a CSS circle

You can use a box-shadow to add a secondary border around the circle. Aside from that, the border-radius won't even work in IE8, as it isn't supported. You would need a polyfill if you want to gain support across old, outdated browsers.

jsFidle example

CSS

.shadow-circle{
    width:100px;
    height:100px;
    border: 6px solid red;
    box-shadow: 0px 0px 0px 10px blue;
    border-radius: 50%;
}

Also, box-shadow isn't supported by IE8 either.

Two borders on top of each other, are not lined up

Your problem is anti-aliasing, which causes the colors to blend to prevent "jaggies" and makes it appear that the colors are bleeding. However, if you zoom in, you can see that there is no bleeding. That, and floating point numbers aren't stored exactly, so CSS's calculation of the circles is very slightly off.

I would use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

VERDICT: Use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

CSS circle - possible to add a transparent gap between border and background color?

You can achieve that with a pseudo element (.circle::after) and the following (or similar) settings:

.container {  height: 100px;  background: url('https://picsum.photos/536/354');}
.circle {  top: 20px;  left: 20px;  width: 50px;  height: 50px;  border-radius: 50%;  background: red;  position: relative;  box-sizing: border-box;}
.circle::after {  content: '';  position: absolute;  box-sizing: border-box;  border: 3px solid red;  border-radius: 50%;  width: calc(100% + 16px);  height: calc(100% + 16px);  left: -8px;  top: -8px;}

<div class="container">  <div class="circle"></div></div>

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>

Circle with Two Borders