Read main tutorial : Inner circle may have any width placed inside outer DIV

About this tutorial : This is a CSS tutorial to create concentric circles using CSS. The formula and this article written by Mr Choudhury from Kolkata (+91 India Phone 9163111390). This is a generalized formula to write CSS. You are free to use this formula for your site. This is the first article of this series.

 

Explanation and rule:

HTML Code :

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

Style Sheet :

<style>
.shapeborder { border:1px solid black; }
.circle { border-radius: 50%; }

.outer {
            background-color:blue;
            width:400px;
            height:400px;
            position:relative;
}

.inner {
            background-color:yellow;
            top: 3%; left:3%;
            width:94%;
            height:94%;
            position: relative;
}
</style>