JSFiddle - React, Tailwind, and code Playground

by Jorgelig

HTML

<div class="box">Content</div>

CSS

.box {
     /* fake border */
     position: relative;
     overflow: hidden;
     box-shadow: inset 0px 0px 0px 10px green;
     padding: 2em;
 }

.box:before {
    /* this element will hide the fake border on the top and bottom */
    content:'';			
    display: block;
    position: absolute;
    border-top:10px solid white;
    border-bottom:10px solid white;
    /* height = border-width x2 */
    height:calc(100% - 20px); 
    top:0;
    /* width = size of fake-border x2 */
    width: calc(100% - 36px);
    /* left = size of fake-border */
    left:18px;
}

.box:after {
    /* this element will hide the fake border on the left and right */
    /* the rules for width, heigth, top and left will be the opposite of the former element */
    display: block;
    position: absolute;
    content:'';
    border-right:10px solid white;
    border-left:10px solid white;
    height:calc(100% - 36px);
    width: calc(100% - 20px);
    top:18px;
    left: 0;
}