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

Just use box-shadow to get the effect you want:

Demo in a fiddle: http://jsfiddle.net/972SF/16/

The html is reduced to:

    
Test Circle
    

    

Css:

#circle {
    margin: 10em auto;
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
    -webkit-box-shadow: 1px 1px 0px 100px black;
       -moz-box-shadow: 1px 1px 0px 100px black;
            box-shadow: 1px 1px 0px 100px black;
}

its simple, easy, and makes sure that your circles are always perfectly positioned next to each other.

You can change the size of the circle by changing the 4th property ( 100px ) on box-shadow to what ever you want.