No entiendo cómo esto no funciona. El borde del ejemplo siguiente debe ser transparente para que se pueda ver el texto debajo.

Como es en mi caso: establecer el alfa del borde en 0 lo hace blanco. Aquí se vuelve negro.

https://jsfiddle.net/taqqcu5j/

// Altought this is not a must, i need it to make a visual illusion perfect.

<p>TEXT</p>

<div class='thisElement'></div>

Css

.thisElement{
  position:absolute;
  width:100px;
  height:100px;
  background-color:#000;
  border:100px solid rgba(255,255,0,.5);
}

P{
  position:absolute;
  font-size:40px;
}
2
Krupp 25 ene. 2016 a las 22:47

2 respuestas

La mejor respuesta

Necesita usar background-clip en el elemento. Si no usa clip de fondo, el borde hereda el color de fondo y luego aplica el color del borde. https://jsfiddle.net/a2bxzk7z/

.thisElement {
  background-clip: padding-box;
}
4
CKH4 25 ene. 2016 a las 19:55

El color del borde de un elemento se ve afectado por el fondo si el borde no es completamente sólido y opaco o si el clip de fondo no es un cuadro de borde.

En su caso, el fondo es negro. Cambiar la propiedad de background-clip a padding-box solucionará esto. La propiedad predeterminada para background-clip es border-box.

La propiedad background-clip especifica el área de pintura del fondo.

Hay tres valores posibles para esta propiedad.

  • border-box: valor predeterminado. El fondo está recortado al cuadro del borde.
  • padding-box: el fondo se recorta en el padding-box
  • cuadro de contenido: el fondo se recorta en el cuadro de contenido

Referencia

http://www.w3schools.com/cssref/css3_pr_background-clip.asp

1
Richard Hamilton 25 ene. 2016 a las 19:58