web-dev-qa-db-fra.com

Cercle CSS avec bordure

Chaque guide que je trouve a la ligne et remplit la même couleur. Tout ce que je veux, c'est un cercle avec une ligne rouge et un remplissage blanc.

J'ai essayé:

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

Mais ne peut pas obtenir la bordure rouge?

csscss-shapes
21
Stre

Vous avez oublié de définir la largeur de la bordure! Changement border: red; à border:1px solid red;

Voici le code complet pour obtenir le cercle:

.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>
34
Sebastian Brosch

Il vous manque les propriétés largeur de la bordure et style de la bordure dans la propriété Border shorthand :

.circle {
    border: 2px solid red;
    background-color: #FFFFFF;
    height: 100px;
    border-radius:50%;
    width: 100px;
}
<div class="circle"></div>

En outre, vous pouvez utiliser des pourcentages pour la propriété border-radius afin que la valeur ne soit pas dépendante de la largeur/hauteur du cercle. C'est pourquoi j'ai utilisé 50% pour border-radius (plus d'informations sur border-radius inn pixels et pourcentage ici ).

Note latérale: Dans votre exemple, vous n'avez pas spécifié la propriété border-radius sans les préfixes de fournisseur dont vous n'avez probablement pas besoin en tant que seuls navigateurs auparavant chrome 4 safari 4 et Firefox 3.6 les utilisent (voir canIuse ).

19
web-tiki

Essaye ça:

.circle {
    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);
}
4
Nalan Madheswaran

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;
}
2
Ya Zhuang

Voici un jsfiddle afin que vous puissiez voir un exemple de ce fonctionnement.

Code HTML:

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

Code 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>
1
Florin Pop