How can I get three contours on one circular div?

Question

I have the following code. I'm trying to draw three outlines of one single. For the first level, I used the border, and for the second I used shadows.

Is it possible to use the third level using only CSS? I can achieve this using another div, but I am looking for a way to do this with one div.

#sample {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 4px solid #ccc;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
}

<div id="sample">
</div>

Run codeHide result

Answer 1

Just use some shadows.

.me {
  box-shadow: 0 0 0 1px red,
              0 0 0 2px yellow,
              0 0 0 3px green;
}

<div class="me">me</div>

<br><br>

<div class="me" style="border-radius: 20px;">me rounded</div>

Run codeHide result

Answer 2

Another option if you want a transparent inner ring

body {
  background: red;
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-640-480-10.jpg);
}
#sample {
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  margin: 1em auto;
  border-radius: 50%;
  background: #f1f1f1;
  box-shadow: 0px 0px 0px 10px rgba(68, 68, 68, 1);
  /* outer ring */
  border: 10px solid #ccc;
  /* inner 'ring */
  padding: 10px;
  /* really inner ring */
  background-clip: content-box;
}

<div id="sample">
</div>

Run codeHide result

Answer 3

, Fez Vrasta , :after:

#sample {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 4px solid #ccc;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  -moz-box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  box-shadow: 0px 0px 0px 2px rgba(68, 68, 68, 1);
  position: relative;

}
#sample:after {
  border: 4px solid red;
  border-radius: 50%;
  content: " ";
  width: 114px;
  height: 114px;
  display: block;
  position: absolute;
  left: -11px;
  top: -11px;
}

<div id="sample">
</div>

Hide result