css3 - Creating concentric circles in CSS -

i trying create bunch of concentric circles purely using css. here's css:

.inner-circle{ height: inherit; width: inherit; background: #fff; border: 1px solid #1a1a1a; border-radius: 50%; padding: 5px; margin: 1%; 

}

my attempt far here: http://jsfiddle.net/4yl2m/

however, can see in link, able create ellipses according width , height of canvas area. can suggest how draw perfect concentric circles nesting same div within itself?

i can't see way around specifying exact dimensions (with equal width/height) outermost circle. can give own class

<div class="inner-two container"> .container {     width: 100px;     height: 100px;     margin: 1%; } 

the inner circles concentric borders/padding if set box-sizing: border-box since border/padding included in dimensions. margin not included in , undesirable. need specify height: 100%.

http://jsfiddle.net/4yl2m/8/

note containing div not have 1 of circle divs; can be.

note in order use firefox need set -moz-box-sizing: border-box; boxing-sizing: border-box;.