How to make one circle inside of another using CSS

Question

I am trying to make one circle inside of another circle using css, but I am having an issue making it completely centered. I am close, but still not there. Any ideas?

<

Answer 1

You don't need extra elements in CSS3

You can do it all with one element and a box-shadow.

JSFiddle Demo.

CSS

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:300px;
    width:300px;
    position: relative;
    box-shadow: 0 0 0 100px black;
    margin:100px;
}