How to create multiple borders around existing border of circle [duplicate]

Question

I am creating a semi-transparent circle in css using border-radius: 50%; and border: 400px solid rgba(255, 255, 255, .5);.

Around this circle I would like to have another border which is fully transparent (of let's say 10 pixels) only to have another border (of 10 pixels) which is again semi-transparent.

This is how I am creating my circle:

div.circle {
  background: rgba(255, 255, 255, .5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 10px;
}

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

What do I need to do to create another border around the existing border and then another border?

Answer 1

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>

You can also consider radial-gradient

div.circle {
  background: 
    radial-gradient(farthest-side, 
      rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px),
      transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}

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

That you can easily scale to any number of borders:

div.circle {
  background: 
    radial-gradient(farthest-side,
      #fff        calc(100% - 61px),transparent calc(100% - 60px), 
      transparent calc(100% - 51px),#fff        calc(100% - 50px),
      #fff        calc(100% - 41px),transparent calc(100% - 40px),
      transparent calc(100% - 31px),#fff        calc(100% - 30px),
      #fff        calc(100% - 21px),transparent calc(100% - 20px),
      transparent calc(100% - 11px),#fff        calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}

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

Answer 2

You could use ::before and :after pseudo element as shown in my snippet. I added both, but for your requirements one would probably suffice:

(Edit: I changed the position parameters, centering the pseudo elements. That way you only need to change height and width if you want different dimensions)

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #7a4;
}

div.circle {
  background: rgba(255, 255, 255, 0.5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 100px;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 440px;
  width: 440px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 520px;
  width: 520px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

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