<div class="container">
  <div class="border border-none">none</div>
  <div class="border border-hidden">hidden</div>
  <div class="border border-dotted">dotted</div>
  <div class="border border-dashed">dashed</div>
  <div class="border border-solid">solid</div>
  <div class="border border-double">double</div>
  <div class="border border-groove">groove</div>
  <div class="border border-ridge">ridge</div>
  <div class="border border-inset">inset</div>
  <div class="border border-outset">outset</div>
</div>
.container {
  border: 1px solid;
  padding: 4px;
}
.border {
  width: 200px;
  padding: 4px;
  margin-bottom: 6px;
  border-width: 4px;
  background-color: lightsalmon;
}
.border-none { border-style: none; }
.border-hidden { border-style: hidden; }
.border-dotted { border-style: dotted; }
.border-dashed { border-style: dashed; }
.border-solid { border-style: solid; }
.border-double { border-style: double; }
.border-groove { border-style: groove; }
.border-ridge { border-style: ridge; }
.border-inset { border-style: inset; }
.border-outset { border-style: outset; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.