JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.wrapper{
  position: relative;  
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  top: 100px;
  left: 100px;
}

.box:before{
  content:"";
  border: 1px solid #000;
  border-bottom: 1px solid #fff;
  width: 50%;
  height: 10px;
  position: absolute;
  top: -12px;
  left: -1px;
}

.box:after{
  content:"";
  border: 1px solid #000;
  border-top: 1px solid #fff;
  width: 50%;
  height: 10px;
  position: absolute;
  bottom: -12px;
  right: -1px;
}