Creating concentric circles in 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?

do you want the height equal to the width? – bwoebi May 21 '13 at 20:05 — bwoebi, May 21 '13 at 20:05
Yes, that's when you get a perfect circle. – Gautam Krishnan May 21 '13 at 20:07 — Gautam Krishnan, May 21 '13 at 20:07

score 6 · Accepted Answer · edited May 07 '14 at 23:03

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;.

@Yahreen use `-moz-box-sizing` – Explosion Pills Feb 20 '14 at 19:28 — Explosion Pills, Feb 20 '14 at 19:28

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

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.

edited May 23 '17 at 11:52

Community

1
1

answered May 21 '13 at 20:10

user1618143

1,728
1
13
27

score 0 · Answer 3 · answered May 21 '13 at 20:22

0

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%;
}

answered May 21 '13 at 20:22

Steve0

2,233
2
13
22

score 0 · Answer 4 · answered Nov 23 '13 at 05:53

0

Just add :

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

answered Nov 23 '13 at 05:53

AymericPM

1

score 0 · Answer 5 · answered Mar 29 '19 at 18:26

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">
        &nbsp;
        </div>

        <div class="child2">
        &nbsp;
        </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>

Creating concentric circles in CSS

5 Answers5