JSFiddle - React, Tailwind, and code Playground

by D7460N

HTML

<div id="content"><p>This is some content</p></div>

CSS

#content { position: relative; width: 400px; height: 300px; }
#content::before,
#content::after,
#content > :first-child::before,
#content > :first-child::after {
    position: absolute;
    width: 80px;
    height: 80px;
    border-color: red; /* or whatever colour */
    border-style: solid; /* or whatever style */
    content: ' ';
}
#content::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
#content::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
#content > :first-child::before { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
#content > :first-child::after { bottom: 0; left: 0; border-width: 0 0 1px 1px; }