JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <span class="inline"><span>Here "box-shadow" is working as it should: we see a kind of a border around the text.</span></span>
</div>
<div class="block opaque">
    <span class="inline"><span>But if opacity is set to less than 1, IE 10 chops the border as if "overflow:hidden" was set, and Opera 12 keeps them only for the first line.</span></span>
</div>

CSS

.block{
	margin:20px auto;
	width:300px;
	height:50px;
}

.inline{
	display:inline;
    background:red;
	box-shadow:0 0 0 10px red;
}
.opaque{
    opacity:.5;
    
}
.inline span{
    position:relative;
    z-index:1;
    
}