CODEWITHSUNDEEP
htmlcss
Sooraj
Sooraj

Reputation: 10577

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

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>

Upvotes: 4

Views: 106

Answers (3)

Paulie_D
Paulie_D

Reputation: 115374

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>

Upvotes: 6

David Wilkinson
David Wilkinson

Reputation: 5118

Nowhere near as elegant as Fez Vrasta's solution, but how about using the :after pseudo element:

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

Upvotes: 2

Fez Vrasta
Fez Vrasta

Reputation: 14835

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>

Upvotes: 8

Related Questions