¿Cómo hacer un borde transparente usando CSS?

Solución:

Bueno, si quieres completamente transparente, puedes usar

border: 5px solid transparent;

Si te refieres a opaco / transparente, entonces puedes usar

border: 5px solid rgba(255, 255, 255, .5);

Aquí, a significa alfa, que puede escalar, 0-1.

También algunos podrían sugerirle que use opacity que también hace el mismo trabajo, la única diferencia es que hará que los elementos secundarios también se vuelvan opacos, sí, hay algunas soluciones, pero rgba parece mejor que usar opacity.

Para navegadores más antiguos, siempre declare el color de fondo usando #(hexadecimal) como una alternativa, de modo que si los navegadores antiguos no reconocen el rgba, aplicarán el hex color a tu elemento.

Manifestación

Demo 2 (Con una imagen de fondo para div anidado)

Demo 3 (Con un img etiqueta en lugar de una background-image)

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

Nota (Para la demostración 3): La imagen se escalará de acuerdo con la altura y el ancho proporcionados, así que asegúrese de que no rompa la relación de escala.

También puedes usar border-style: double con background-clip: padding-box, sin el uso de ningún elemento adicional (pseudo-). Probablemente sea la solución más compacta, pero no tan flexible como las demás.

Por ejemplo:

<div class="circle">Some text goes here...</div>

.circle{
    width: 100px;
    height: 100px;
    padding: 50px;
    border-radius: 200px;
    border: double 15px rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.7);
    background-clip: padding-box;
}

Si observa de cerca, puede ver que el borde entre el borde y el fondo no es perfecto. Esto parece ser un problema en los navegadores actuales. Pero no se nota tanto cuando el borde es pequeño.

Utilizando el :before pseudo-elemento,
CSS3 border-radius,
y algo transparencia es bastante fácil:

DEMO EN VIVO

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

CSS:

.circle, .circle:before{
  position:absolute;
  border-radius:150px;  
}
.circle{  
  width:200px;
  height:200px;
  z-index:0;
  margin:11%;
  padding:40px;
  background: hsla(0, 100%, 100%, 0.6);   
}
.circle:before{
  content:'';
  display:block;
  z-index:-1;  
  width:200px;
  height:200px;

  padding:44px;
  border: 6px solid hsla(0, 100%, 100%, 0.6);
  /* 4px more padding + 6px border = 10 so... */  
  top:-10px;
  left:-10px; 
}

los :before se adhiere a nuestro .circle otro elemento que solo necesitas hacer (ok, bloque, absoluto, etc …) transparente y jugar con el opacidad del borde.

---

---

Utiliza Nuestro Buscador