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>

Style Sheet :

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

.outer {

.inner {
            top: 3%; left:3%;
            position: relative;