Creating concentric circles in CSS - css

Question

I am trying to create a bunch of concentric circles purely using CSS. Here's my CSS:
.inner-circle{
height: inherit;
width: inherit;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding: 5px;
margin: 1%;
}
My attempt so far is here: http://jsfiddle.net/4yL2m/
However, as you can see in the link, I am only able to create ellipses according to the width and height of the canvas area. Can anyone suggest how to draw perfect concentric circles by nesting the same div within itself?

Answer 1

I can't see any way around specifying exact dimensions (with equal width/height) for the outermost circle. You can give it its own class
<div class="inner-two container">
.container {
width: 100px;
height: 100px;
margin: 1%;
}
The inner circles will be concentric with borders/padding if they are set to box-sizing: border-box since the border/padding will be included in the dimensions. margin is not included in this and is thus undesirable. You also need to specify height: 100%.
http://jsfiddle.net/4yL2m/8/
Note that the containing div does not also have to be one of the circle divs; it just can be.
Note in order to use it for firefox you need to set -moz-box-sizing: border-box; as well as boxing-sizing: border-box;.

Answer 2

Basically, you need to get the aspect ratio fixed at 1:1. Apparently there's an aspect-ratio CSS attribute that webkit browsers recognize, but it won't work cross-platform. See this question for more details, including some cross-browser workarounds.

Answer 3

This might get you closer;
.inner-two{
height: 0px;
width: 50%;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding-bottom: 50%;
margin:25%;
}

Answer 4

Just add :
display: table-cell;
text-align: center;
vertical-align: middle;

Answer 5

Three concentric circles
Here I have drawn 3 circles using CSS. The middle circle is exactly centered between the outermost and innermost circle. In other words the
RADIUS OF THE MIDDLE CIRCLE = (OUTER CIRCLE RADIUS + INNER CIRCLE RADIUS) / 2.
Here each circles has been represented by a DIV.
HTML
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
CSS
<style>
.parent {
background-color:blue;
width:400px; /* You can define it by % also */
height:400px; /* You can define it by % also*/
position:relative;
border:1px solid black;
border-radius: 50%;
}
.child1 {
background-color:lime;
top: 10%; left:10%; /* of the container */
width:80%; /* of the outer-1 */
height:80%; /* of the outer-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}
.child2 {
background-color:yellow;
top: 20%; left:20%; /* of the container */
width:60%; /* of the inner-1 */
height:60%; /* of the inner-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}
</style>