Part – 2: Draw Two Concentric Circles, Inner Circle Exactly Centered

 

StyleSheet Code:

<style>

.outer {
                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 {
                background-color:yellow;
                top: 25%; left:25%; /* of the container */
                width:50%; /* of the container */
                height:50%; /* of the container */
                position: relative;
                border:1px solid black;
                border-radius: 50%;
}
</style>

HTML Code :

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