score:3

Accepted answer

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>

this approach even allows you to add multible borders:

.circle-unicorn {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  margin: 50px;
  background-color: white;
  box-shadow: 0 0 0 5px #9932ff, 
              0 0 0 10px #b231fd, 
              0 0 0 15px #ff31eb,
              0 0 0 20px #ff3291,
              0 0 0 25px #fe3030,
              0 0 0 30px #fe6031,
              0 0 0 35px #ffc132,
              0 0 0 40px #30fe5b,
              0 0 0 45px #5230ff,
              0 0 0 50px #3e25bf;
}
<div class="circle-unicorn"></div>

score:1

you can do this very easily, by simply adding an background color, padding and solid border.

i created a quick example: https://jsfiddle.net/o81rre69/

    .upload {
        border-radius: 50%;
        padding: 5px;
        height: 150px;
        width: 150px;
        background: #fff;
        border: 3px solid #bbb;
    }

hope it helps!

score:2

handtrix's answer is a good one. another possible solution:

.circle-shadow-border {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  background-color: gray;
  box-shadow: 0px 0px 0px 5px white inset;
  border: solid 5px gray;
  margin: 20px;
}
<div class="circle-shadow-border"></div>

or use background-clip: content-box;:

.circle-border-backclip {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  background-color: gray;
  margin: 20px;
  border: solid 5px gray;
  padding: 5px;
  background-clip: content-box; /* support: ie9+ */
}
<div class="circle-border-backclip"></div>

for more information you could see https://css-tricks.com/snippets/css/multiple-borders/.


Related Query

More Query from same tag