How to Create Multiple Borders Around Existing Border of Circle

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>

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 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;

CSS circles - outer border with white space on inside of element

Use background-clip: content-box; so your background fills the content area only and set padding as a size of white space.

See the snippet below:

.status {  display: block;  width: 8em;  height: 8em;  border-radius: 100%;  background-color: #2ed091;  margin: 5px;  border: 1px solid black;    background-clip: content-box;  padding: 1em;}

<span class="status"></span>

How to create a double outline border?

Try using nested box-shadows:

.circle-border-2 {  border-radius: 50%;  width: 200px;  height: 200px;   margin: 10px;  background-color: #ccdde5;  box-shadow: 0 0 0 5px  white,               0 0 0 10px #ccdde5;}

<div class="circle-border-2"></div>

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>

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>

Inner spacing inside rounded checkbox

Use border: 2px solid white; for the white ring, and box-shadow: 0 0 0 2px #ddd; for the outer grey ring.

Then you can set background-color to white for unchecked or #73c0ec for checked.

input[type="radio"] {  width: 1.3em;  height: 1.3em;  background-color: white;  border-radius: 50%;  border: 2px solid white;  box-shadow: 0 0 0 2px #ddd;  -webkit-appearance: none;  cursor: pointer;}input[type="radio"]:checked {  background-color: #73c0ec;}

<input type="radio" name="group-1"><br><input type="radio" name="group-1"><br><input type="radio" name="group-1">

How to Create Multiple Borders Around Existing Border of Circle