I tested the borders with opacity, and Webkit seems to have weird behavior.
Here is my code
<style>
div{
position: relative;
width: 300px;
height: 300px;
background: #00f;
}
span{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
<div>
<span></span>
</div>
You can test it here . In Firefox, you get as expected: the inner 10px border is white with an opacity of 50% around the div, however, at least Chrome (but I suspect Webkit) seems to overlap the borders (somehow it makes sense). And I think this is not intended, because it seems to overlap itself!
Is this a bug or just an intended function?
source
share