CSS Кружок с рамкой

Question

Каждый проводник, который я нахожу, имеет линию и заполняет тот же цвет. Все, что я хочу, это круг с красной линией и белым заполнением.

Я пробовал:

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

Но не может получить красную границу?

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

Вы забыли установить ширину границы! Изменение border: red; в border:1px solid red;

Здесь полный код, чтобы получить круг:

.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

Вы пропускаете border width и border style свойства в Border shorthand property:

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

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

---

Кроме того, Вы можете использовать проценты для свойства границы радиуса, так что величина не зависит от окружности ширины/высоты. Вот почему я использовал 50% для пограничного радиуса (подробнее об border-radius inn pixels and percent here).

Side Примечания: В вашем примере, вы не указали свойство границы радиуса без префиксов вы Propably ведьмы не нужны, как только браузеров, прежде чем хром 4 Safari 4 и Firefox 3.6 использует их (см canIuse).

Answer 4

Это jsfiddle, поэтому вы можете увидеть пример этой работы.

HTML код:

<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

Попробуйте это:

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