Cerchio CSS con bordo

Question

Ogni guida che trovo ha la linea e riempie lo stesso colore. Tutto ciò che voglio è un cerchio con una linea rossa e un riempimento bianco.

ho provato:

.circle { 
    border: red; 
    background-color: #FFFFFF; 
    height: 100px; 
    -moz-border-radius:75px; 
    -webkit-border-radius: 75px; 
    width: 100px; 
} 

ma non può ottenere il bordo rosso?

Answer 1

http://jsbin.com/qamuyajipo/3/edit?html,output

.circle { 
    border: 1px solid red; 
    background-color: #FFFFFF; 
    height: 100px; 
    -moz-border-radius:75px; 
    -webkit-border-radius: 75px; 
    width: 100px; 
} 

Answer 2

Hai dimenticato di impostare la larghezza del bordo! Cambiare border: red;-border:1px solid red;

Ecco il codice completo per ottenere il cerchio:

.circle { 
 
    background-color:#fff; 
 
    border:1px solid red;  
 
    height:100px; 
 
    border-radius:50%; 
 
    -moz-border-radius:50%; 
 
    -webkit-border-radius:50%; 
 
    width:100px; 
 
}

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

Answer 3

Ti manca i ei border style proprietà border width nel Border shorthand property:

.circle { 
 
    border: 2px solid red; 
 
    background-color: #FFFFFF; 
 
    height: 100px; 
 
    border-radius:50%; 
 
    width: 100px; 
 
}

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

---

Inoltre, è possibile utilizzare le percentuali per la proprietà border-radius in modo che il valore non è dipendente dal cerchio larghezza/altezza. Questo è il motivo per cui ho usato il 50% per il raggio di confine (maggiori informazioni su border-radius inn pixels and percent here).

Nota a margine: Nel tuo esempio, non ha specificato la proprietà border-radius senza prefissi vendor a tuute le esigenze si propably non hanno bisogno come solo i browser prima di cromo 4 Safari 4 e Firefox 3.6 li utilizza (vedi canIuse).

Answer 4

Ecco un jsfiddle in modo da poter vedere un esempio di questo funzionamento.

codice HTML: Codice

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

CSS:

.circle { 
 
     /*This creates a 1px solid red border around your element(div) */ 
 
     border:1px solid red; 
 
     background-color: #FFFFFF; 
 
     height: 100px; 
 
     /* border-radius 50% will make it fully rounded. */ 
 
     border-radius: 50%; 
 
     -moz-border-radius:50%; 
 
     -webkit-border-radius: 50%; 
 
     width: 100px; 
 
    }

<div class='circle'></div>

Answer 5

Prova questa:

.cirlce { 
    height: 20px; 
    width: 20px; 
    padding: 5px; 
    text-align: center; 
    border-radius: 50%; 
    display: inline-block; 
    color:#fff; 
    font-size:1.1em; 
    font-weight:600; 
    background-color: rgba(0,0,0,0.1); 
    border: 1px solid rgba(0,0,0,0.2); 
    }