JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x"></div>
<div class="y"></div>

CSS

.x {
    border: 5px solid rgb(125,185,153);
    border-image: linear-gradient(to bottom, rgba(108,219,141,0) 25%,rgba(108,219,141,1) 25%,rgba(108,219,141,1) 75%,rgba(108,219,141,0) 75%);
    border-image-slice: 1;
}

.y {
    border: 5px solid rgb(125,185,153);
    border-image: linear-gradient(to right, rgba(108,219,141,0) 25%,rgba(108,219,141,1) 25%,rgba(108,219,141,1) 75%,rgba(108,219185,141,0) 75%);
    border-image-slice: 1;
}













div {display:inline-block; margin-right: 5px; margin-bottom: 5px; width: 100px; height: 100px; background: #212831; box-sizing: border-box;}