Search code examples
cssborderalpha

CSS Border alpha not working

I just dont understand how this doesn't work. The border in the example below should be transparent so that one can see the text under it.

As it is by my case: setting the border's alpha to 0 makes it white. Here it becomes black.

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

  • You need to use background-clip on the element. If you don't use background-clip the border inherits the background color and then applies the border-color. https://jsfiddle.net/a2bxzk7z/

    .thisElement {
  background-clip: padding-box;
}