CSS circle with two borders of different colors or at least looks like [duplicate]

Question

I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:

.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
}

.circle:hover {
    width: 27px;
    height: 27px;
    border-radius: 18px;
    font-size: 12px;
    color: white;
    line-height: 27px;
    text-align: center;
    background: #3E78B2;
}

Here is link to jsFiddle

You could see currently it has some white border. I would like to add another border on top of white border.

Please let me know if you have any ideas/suggestions.

Answer 1

Hi u can make this also :

.container {
    background-color: grey;
    height: 200px;
    padding:10px; // ADD THIS ALSO
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}

the advantage is that you can also put a blur effect, changing like this:

box-shadow: 0 0 3px 3px #002525;

Answer 2

If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/

.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #000;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #fff;
    position: relative;
    z-index: 1;
}
.circle:before {
    position: absolute;
    right: 2px;
    top: 2px;
    left: 2px;
    bottom: 2px;
    content: '';
    background: #3E78B2;
    border-radius: 25px;
    z-index: -1;
}
.circle:hover {
    width: 27px;
    height: 27px;
    border-radius: 18px;
    font-size: 12px;
    color: white;
    line-height: 27px;
    text-align: center;
    background: #fff;
}

You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.