JSFiddle - React, Tailwind, and code Playground

HTML

<div class="s">
    <div class="fs"></div>
</div>

CSS

body {
    margin:0px;
}
.s {
background: #000;
padding: 12px 14px 17px 11px;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 300px;
height: 300px;
display: inline-block;
}
.fs {
    width: 100%;
    height:100%;
    background: #fff;
    border: 7px solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-color: #bfbfbf #fff #fff #bfbfbf;
    border-radius: 13px;
    position: relative;
}
.fs:after {
    width: 100%;
    height: 100%;
    display: block;
    content:"";
    background: #FFF;
    border: 6px solid;
    box-sizing: border-box;
    border-color: #fff #dfdfdf #dfdfdf #fff;
    /*border-radius: 0 0 8px 0;*/
    border-radius: 8px;
}