Cerchio CSS con due bordi di colori diversi o almeno sembra

Question

Ho un cerchio con un bordo, ma vorrei sapere se c'è comunque un cerchio con due bordi di colori diversi. Ho seguito i CSS produrre cerchio come segue:

.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

Si vedeva attualmente ha alcune bordo bianco. Vorrei aggiungere un altro bordo sopra il bordo bianco.

Per favore fatemi sapere se avete idee/suggerimenti.

Answer 1

Ciao u può fare anche questo:

.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 
} 

il vantaggio è che si può anche mettere un effetto di sfocatura, cambiando in questo modo:

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

Answer 2

Se ho capito bene, penso che stai cercando di fare qualcosa in questo senso: 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; 
} 

Noterete che ho preso il colore di sfondo originale e aggiunto al :before pseudo- elemento, spostato lo #fff sullo sfondo e reso l'altro colore del bordo (in questo esempio, #000) il colore del bordo dell'elemento originale. Entrambi i moduli z-index sono necessari per ottenere la giusta stratificazione.