css - círculo con margen en el borde

Question

Estoy tratando de crear un círculo con un contorno que tenga margen.
Todo parece funcionar, excepto que no puedo obtener esos pocos px de margen allí.
¿Alguna sugerencia por favor?

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;} 

heres mi violín: http://jsfiddle.net/nalagg/K6pdr/

Answer 1

diría que tratarlo como esto:

exterior "frontera" - utilizar una caja de sombra
interior "margen" - usar un borde blanco
zona interior - el uso color de fondo

En conjunto se obtiene:

.circle { 
 
    background-color: #F80; 
 
    border: 3px solid #FFF; 
 
    border-radius: 18px; 
 
    box-shadow: 0 0 2px #888; 
 
    height: 30px; 
 
    width: 30px; 
 
}

<div class="circle"></div>

---

Como alternativa, se puede utilizar un segundo elemento:

.circle { 
 
    border: 1px solid #CCC; 
 
    border-radius: 19px; 
 
    display: inline-block; 
 
} 
 

 
.inner { 
 
    background-color: #F80; 
 
    border-radius: 15px; 
 
    margin: 3px; 
 
    height: 30px; 
 
    width: 30px; 
 
}

<div class="circle"> 
 
    <div class="inner"></div> 
 
</div>

Answer 2

intento con:

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin: 2px; background: #fcc; width: 30px; height: 30px; } 

O con relleno interno:

.ui-corner-all2 { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; padding: 2px; background: #fcc; width: 30px; height: 30px; } 

Ver también en t su violín es la diferencia cuando se usa el margen frente a las propiedades de relleno de CSS.

http://jsfiddle.net/MQx7r/4/

Answer 3

Se puede utilizar en combinación con outlineoutline-radius. Compruebe esto jsFiddle.