How to add a second border around a CSS circle

I have the following CSS which creates a red circle (JS fiddle here: http://jsfiddle.net/47BDT/)

<div class="shadow-circle"></div>
.shadow-circle{
  width:100px;
  height:100px;
  border-radius: 50%;
  border: 6px solid red;
  -moz-background-clip: content; /* Firefox 3.6 */
  -webkit-background-clip: content; /* Safari 4? Chrome 6? */
  background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

I want to add a 1px blue border around the circle (also a circular border). How do I do this? Solution needs to work in IE8.


solution

You can use a box-shadow to add a secondary border around the circle. Aside from that, the border-radius won’t even work in IE8, as it isn’t supported. You would need a polyfill if you want to gain support across old, outdated browsers.

jsFidle example

CSS

.shadow-circle{
  width:100px;
  height:100px;
  border: 6px solid red;
  box-shadow: 0px 0px 0px 10px blue;
  border-radius: 50%;
}

Also, box-shadow isn’t supported by IE8 either.