JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"><img src="http://dummyimage.com/240x180/000/fff" alt=""></img></div>

<div id="bg"></div>

<span>Color comparison</span>

CSS

div{
    position:relative;display:inline-block;
}
img{
    display:block;
}
#wrapper:before{
    position:absolute;
    content:"";
    top:0;left:0;right:0;bottom:0;
    border:5px solid rgba(255,0,0,0.5);
}

#bg{
    height:180px;
    width:240px;
    box-sizing:border-box;
    background:#F00;
    border:5px solid rgba(255,0,0,0.5);
    background:url(http://dummyimage.com/240x180/000/fff);
}
span{
    display:block;
    border:5px solid rgba(255,0,0,0.5);
}