JSFiddle - React, Tailwind, and code Playground

HTML

<div class="brd">
  <div class="brd__in"></div>
 </div>

CSS

.brd {
   position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
 }
 .brd__in{
   height: 100%;
   }
   
.brd:before,
.brd:after,
.brd__in:before,
.brd__in:after{
  content:"";
   position: absolute;
  width: 10px;
  height: 10px;
  background: red;
}
.brd:before{
    top: 0;
   left: 0;
}
.brd:after{
    top: 0;
   right: 0;
}
.brd__in:before{
    bottom: 0;
   left: 0;
}
.brd__in:after{
    bottom: 0;
   right: 0;
}