CODEWITHSUNDEEP
htmlcss
alias51
alias51

Reputation: 8648

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.

Upvotes: 3

Views: 9257

Answers (4)

leoledmag
leoledmag

Reputation: 136

If you see this post Box shadow in IE7 and IE8

You can find this response, which you can find useful:

Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.

It supports box-shadow (except for the inset keyword).

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241238

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.

Upvotes: 12

matewka
matewka

Reputation: 10168

Add a box-shadow. Leave the blur at 0 (third part of the property) while setting the spread to 1px.

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

Upvotes: 0

Jezen Thomas
Jezen Thomas

Reputation: 13800

I think JoshC’s way is probably best, but another way is to use a pseudo-element:

.shadow-circle:after {
  content: ' ';
  border-radius: 50%;
  border: 6px solid blue;
  width: 110px;
  height: 110px;
  display: block;
  position: relative;
  top: -10px;
  left: -10px;
}

Here’s the demo.

Upvotes: 5

Related Questions