JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="box"></div>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</div>

<div class="wrap">
  <div class="box dashed"></div>
  <div class="box box1 dashed"></div>
  <div class="box box2 dashed"></div>
  <div class="box box3 dashed"></div>
  <div class="box box4 dashed"></div>
</div>

<div class="wrap">
  <div class="box dotted"></div>
  <div class="box box1 dotted"></div>
  <div class="box box2 dotted"></div>
  <div class="box box3 dotted"></div>
  <div class="box box4 dotted"></div>
</div>

<div class="wrap">
  <div class="box double"></div>
  <div class="box box1 double"></div>
  <div class="box box2 double"></div>
  <div class="box box3 double"></div>
  <div class="box box4 double"></div>
</div>

CSS

.wrap {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  border-style: solid;
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-width: 2px;
}
.box.double {
  border-width: 3px;
}

.box1.box1 {
  border-width: 20px;
}

.box2.box2 {
  border-width: 0 10px 5px 20px;
}

.box3.box3 {
  border-radius: 20px;
}

.box4.box4 {
  border-radius: 20px;
  border-width: 0 10px 5px 20px;
}

.dashed {
  border-style: dashed;
}

.dotted {
  border-style: dotted;
}



.double {
  border-style: double;
}