<p>You can make 3 concentric circles with :</p>
<ul>
<li>one element</li>
<li><code>border-radius:50%;</code> to make the shape round</li>
<li>padding and <code>background-clip:content-box;</code> for the white gap between the red and blue circles</li>
<li>border for the outer blue circle</li>
</ul>
<p></p><div class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
width:80px;
height:80px;
border-radius:50%;
background-color:#CE1126;
background-clip:content-box;
padding:40px;
border:40px solid #00247D;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div></div></code></pre>
</div>
</div>
<p></p>
<p>You can also use the approach described in <a href="http://stackoverflow.com/questions/27314373/overlapping-circles-in-css-with-1-div/27314411#27314411">Overlapping circles in CSS with 1 div</a> with multiple box-shadows. </p>
<p><em>Note: as <a href="http://stackoverflow.com/users/2606013/harry">Harry</a> pointed out inset box-shadows would be better (no need for margins and enables click/hover all over the shape)</em></p>
<p></p><div class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
background-color: #CE1126;
width: 240px;
height: 240px;
border-radius: 50%;
box-shadow: inset 0 0 0 40px #00247D, inset 0 0 0 80px #fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div></div></code></pre>
</div>
</div>
<p></p>
<p>This tip was originally posted on <a href="http://stackoverflow.com/questions/28646858/Concentric%20circles%20with%20CSS/28647073">Stack Overflow</a>.</p>
