Círculo CSS com contorno

Question

Círculo CSS com contorno

Cada guia que encontro tem a linha e preenche a mesma cor. Tudo o que eu quero é um círculo com uma linha vermelha e preenchimento branco.

eu tentei:

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

Mas não consegue chegar à fronteira vermelha?

15

css css-shapes

Author: web-tiki, 2015-10-22

Source

5 answers

score 28 · Answer 1

Esqueceste-te de definir a largura da fronteira! Variação border: red; em border:1px solid red; Aqui está o código completo para obter o círculo.

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

score 12 · Answer 2

Falta-lhe a largura do contornoe o estilo do contorno nas propriedades da estenografia do contorno :

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

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

Também pode usar percentagens para a propriedade do raio-contorno, para que o valor não dependa da largura/altura do círculo. É por isso que eu usei 50% para o raio de fronteira (mais informações sobre raio de fronteira em pixels inn e percentagem aqui).

nota lateral : no seu exemplo, não indicou a propriedade do contorno-raio sem os prefixos do Fornecedor de que provavelmente não necessita, uma vez que só os navegadores antes do Chrome 4 safari 4 e do Firefox 3.6 os usam (ver } canIuse).

score 2 · Answer 3

Http://jsbin.com/qamuyajipo/3/edit?html, Produção

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

score 1 · Answer 4

Aqui está um jsfiddle para que você possa ver um exemplo deste trabalho.

Código HTML:

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

Código 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>

score 1 · Answer 5

Tenta isto:

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