JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative; overflow: hidden;">

<button id="show-lines"> Show lines </button>    
    
<div id="etalon">
    Some content without any borders
</div>

<p>
    1. outline + border
</p>
<p>
    2. box-shadow + border 
</p>
<p>
    3. border + box-shadow(inset)
</p>
<p>
    4. box-shadow + box-shadow
</p>
<p>
    5. box-shadow(inset) + box-shadow
</p>
<p>
    6. box-shadow(inset) + box-shadow(inset)
</p>
<p>
    7. outline + box-shadow <small>(works only in FF)</small>
</p>
<p>
    8. outline + box-shadow(inset)
</p>
<p>
    9. border(double) <small>(works if parent background = #FFF)</small>
</p>

<span id="box-begin" class="line"></span>
<span id="box-end" class="line"></span>

</div>

CSS

p, #etalon {
    margin: 20px 10px;
    padding: 0.5em;
    background: #F05258;
    color: #fff;
}

/* === Diferent ways to draw borders === */
p:nth-of-type(1) {
    border: 5px solid #fff;
    outline: 5px solid #F05258;
}

p:nth-of-type(2) {
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #F05258;
}

p:nth-of-type(3) {
    box-shadow: inset 0 0 0 5px #FFF;
    border: 5px solid #F05258;
}

p:nth-of-type(4) {
    box-shadow: 0 0 0 5px #fff, 0 0 0 10px #F05258;
}

p:nth-of-type(5) {
    box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #F05258;
}

p:nth-of-type(6) {
    box-shadow: inset 0 0 0 5px #F05258, inset 0 0 0 10px #fff;
}

p:nth-of-type(7) {
    outline: 5px solid #F05258;
    box-shadow: 0 0 0 5px #fff;
}

p:nth-of-type(8) {
    outline: 5px solid #F05258;
    box-shadow: inset 0 0 0 5px #fff;
}

p:nth-of-type(9) {
    border: 15px double #fff;
}
/* === /Diferent ways to draw borders === */




body {
    font-family: sans-serif;                
    padding: 30px 0;
    background: #d4dde5;
    background: -moz-linear-gradient(top,  #d4dde5 0%, #93bde2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4dde5), color-stop(100%,#93bde2));
    background: -webkit-linear-gradient(top,  #d4dde5 0%,#93bde2 100%);
    background: -o-linear-gradient(top,  #d4dde5 0%,#93bde2 100%);
    background: -ms-linear-gradient(top,  #d4dde5 0%,#93bde2 100%);
    background: linear-gradient(to bottom,  #d4dde5 0%,#93bde2 100%);
}
#box-begin, #box-end {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 1px dashed #000;
    opacity: 0.5;
}    
#box-begin {
    left: 9px;
}
#box-end {
    right: 9px;
}

#show-lines {
    margin: 5px 50px;
}

.line {
    visibility: hidden;
}

.line.visible {
    visibility: visible;
}

JavaScript

$('#show-lines').click(function() {
    $('.line').toggleClass('visible');
});