CSS - double/offset border with outer border dashed - css

Question

I'd like to produce a circle with the outer dashed border offset from the main circle. I've attached a pic for reference.
I have tried using box shadow to achieve this but no luck so far. Is there a way to do this?

Answer 1

I was able to get this effect by utilizing the pseudo-element selector ::before. (::after would work just as well)
Here is a DEMO
Given the element:
<div class="circle"></div>
Apply the following CSS rule:
.circle {
position: relative;
float: left;
border: 2px dotted black; /* This is the outer border (dotted) */
background-color: white; /* This is the color of the inner border */
padding: 10px; /* This is the size of the inner border */
border-radius: 50%;
}
.circle::before {
position: absolute;
display: block;
content: ' ';
background-color: #6abde7; /* This is the color of the inner circle */
width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
border-radius: 50%;
}
You can adjust a few of the rules above. They are mainly there just to give shape to the circle for the demo. I've commented the ones that control the styles of the circle.
Explanation
You're basically adding an element inside of the container element via CSS. This won't work on elements that don't support content. (i. e. <input>)

Answer 2

DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#cef;
border:3px dotted #000;
box-shadow:inset 0 0 0 10px #fff;
}
UPDATE
Using :after
DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#fff;
border:3px dotted #000;
}
.circle:after {
content:' ';
display:block;
height:180px;
width:180px;
border-radius:50%;
background-color:#cef;
position:relative;
top:10px;
left:10px;
}

Answer 3

Is there a reason you can't have a second div, like so?
http://jsfiddle.net/gUYFF/1/
.outline {
float:left;
border: dotted 2px black;
width: 220px;
height: 220px;
border-radius: 110px;
box-shadow: 0 0 0 10px white inset;
}
.circle {
background-color: #6abde7;
width: 200px;
height: 200px;
border-radius: 100px;
margin:10px;
}
<div class="outline"><div class="circle"></div></div>