JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="box__hold">
    some text some text some text some text some text
  </div>
</div>

CSS

body {
  background: #999;
  
}

.box {
  position: relative;
  background: #fff;
  padding: 20px;
  width: 200px;
  height: 200px;
}

.box:before,
.box:after,
.box__hold:before,
.box__hold:after {
  content: '';
  position: absolute;
  width: 20%;
  height: 20%;
  border: 1px solid blue;
}
.box:before {
  top: 20px;
  left: 20px;
  border-width: 1px 0 0 1px;
}
.box:after {
  top: 20px;
  right: 20px;
  border-width: 1px 1px 0 0;
}

.box__hold:before {
  bottom: 20px;
  left: 20px;
  border-width: 0 0 1px 1px;
}
.box__hold:after {
  bottom: 20px;
  right: 20px;
  border-width: 0 1px 1px 0;
}
.box__hold {
  padding: 20px;
  text-align: center;
}