JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="pseudo">
    Transparent Inside Border
    <br>
    Pseudo Element
</div>

<div class="clip">
    Transparent Inside Border
    <br>
    Background Clip
</div>

CSS

body {
    background: url(http://farm7.static.flickr.com/6181/6145664051_a2a18a2d0a_b.jpg);
    font-family: sans-serif; 
    text-align: center;
}
body > div { 
    background: #000; 
    color: #fff; 
    margin: 50px;
    padding: 15px;
    position: relative; 
}
.pseudo:before { 
    border: 5px solid #000; 
    content: ""; 
    position: absolute; 
    top: -10px; 
    bottom: -10px; 
    left: -10px; 
    right: -10px; 
}

.clip {
    background-clip: content-box;
    border: 5px solid #000; 
    padding: 5px;
    margin: 40px;
}