Build shapes (CSS) > Draw three concentric circles

Draw three concentric circles: article by Mr B Choudhury

Description of this tutorial : 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.

Get the explanation of this output here

<div class="outer-1">
            <div class="inner-1">
            &nbsp;
            </div>

            <div class="inner-2">
            &nbsp;
            </div>
</div>

<style>
.outer-1 {
                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%;
}
.inner-1 {
                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%;
}
.inner-2 {
                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>