JSFiddle - React, Tailwind, and code Playground

HTML

<div class='square one'></div>
<br><br>
<div class='two-top'></div>
<div class='square two'></div>

CSS

.square{
  width:40px;
  height:40px;
  border:10px solid green;
}
.one{
  border-top: 20px solid black;
}
.two-top{
  border-top:20px solid black;
  width:60px
}
.two{
   border-top:none;
}