style - CSS círculo con borde

title div css

Question

Cada guía que encuentro tiene la línea y llena el mismo color. Todo lo que quiero es un círculo con una línea roja y relleno blanco.

Yo he tratado:

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

¿Pero no puede llegar el borde rojo?

Answer 1

¡Olvidó establecer el ancho del borde! Cambiar border: red; al border:1px solid red;

Aquí el código completo para obtener el 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>

Answer 2

Aquí hay un jsfiddle para que pueda ver un ejemplo de este trabajo.

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>

Answer 3

Le faltan el ancho del borde y las propiedades de estilo del borde en la propiedad abreviada del borde :

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

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

Además, puede usar porcentajes para la propiedad de radio de borde para que el valor no sea dependiente de la anchura / altura del círculo. Es por eso que utilicé el 50% para el radio del borde (más información sobre los píxeles de la radio del borde y el porcentaje aquí ).

Nota al margen: en su ejemplo, no especificó la propiedad de radio de borde sin los prefijos de proveedores que probablemente no necesita, ya que solo los navegadores antes de que Chrome 4 Safari 4 y Firefox 3.6 los utilicen (ver canIuse ).

Answer 4

Prueba esto:

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

Answer 5

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