JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c1"></div>
<div class="c2"></div>
<div class="c3 c4"></div>
<div class="c4 c3"></div>

CSS

body {
     display: flex;
   }

   div {
     width: 100px;
     height: 100px;
     margin: 1em;
   }

   .c1 {
     border-bottom: solid;
     border: dashed;
   }

   .c2 {
     border: dashed;
     border-bottom: solid;
   }

   .c3 {
     border: dashed
   }

   .c4 {
     border-bottom: solid
   }