How can I get three outlines on a single circular div?

Question

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

Can I have a third level using only CSS? I can achieve this using another div, but I'm looking for a way to do it with a single 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>

Answer 1

Just use multiple 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>

Answer 2

Just another option in case you wanted 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>