JSFiddle - React, Tailwind, and code Playground

HTML

<div style="border:10px solid #f30">solid</div>
<div style="border:10px dashed #f30">dashed</div>
<div style="border:10px dotted #f30">dotted</div>
<div style="border:10px double #f30">double</div>
<div style="border:10px groove #f30">groove</div>
<div style="border:10px ridge #f30">ridge</div>
<div style="border:10px inset #f30">inset</div>
<div style="border:10px outset #f30">outset</div>
<div style="border:10px none #f30">none</div>
<div style="border:10px hidden #f30">hidden</div>

CSS

div {
  font-family: "맑은 고딕", "Lucida Sans", "Lucida Sans Unicode";
  font-size:0.75em;
  width:50px; height:50px;
  margin:20px;
  float:left;
  padding:20px;
  text-align:center;
  background-image:url(images/trans.png);
}