JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d1">border-style: none</div>
<div class="d2">border-style: hidden</div>
<div class="d3">border-style: dotted</div>
<div class="d4">border-style: dashed</div>
<div class="d5">border-style: solid</div>
<div class="d6">border-style: double</div>
<div class="d7">border-style: groove</div>
<div class="d8">border-style: ridge</div>
<div class="d9">border-style: inset</div>
<div class="d10">border-style: outset</div>

CSS

div {
    width: 120px; 
    height: 40px;
    margin: 10px;
    padding: 10px;
    font-size: 0.75em;
    background-color: #eee;
    float: left;
    border-width: thick;
    border-color: #69c;
}
.d1 {
    border-style: none;
}
.d2 {
    border-style: hidden;
}
.d3 {
    border-style: dotted;
}
.d4 {
    border-style: dashed;
}
.d5 {
    border-style: solid;
}
.d6 {
    border-style: double;
}
.d7 {
    border-style: groove;
}
.d8 {
    border-style: ridge;
}
.d9 {
    border-style: inset;
}
.d10 {
    border-style: outset;
}