CSS border styles example

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    padding: 5px;
    margin: 10px;
    text-align: center;
    border-color: orange;
    border-width: 4px;
  }
  .solid {
    border-style: solid;
  }
  .dotted {
    border-style: dotted;
  }
  .dashed {
    border-style: dashed;
  }
  .double {
    border-style: double;
  }
  .groove {
    border-style: groove;
  }
  .ridge {
    border-style: ridge;
  }
  .inset {
    border-style: inset;
  }
  .outset {
    border-style: outset;
  }
  .hidden {
    border-style: hidden;
  }
</style>

<div class="solid">This 'div' has a border style of 'solid'.</div>
<div class="dotted">This 'div' has a border style of 'dotted'.</div>
<div class="dashed">This 'div' has a border style of 'dashed'.</div>
<div class="double">This 'div' has a border style of 'double'.</div>
<div class="groove">This 'div' has a border style of 'groove'.</div>
<div class="ridge">This 'div' has a border style of 'ridge'.</div>
<div class="inset">This 'div' has a border style of 'inset'.</div>
<div class="outset">This 'div' has a border style of 'outset'.</div>
<div class="hidden">This 'div' has a border style of 'hidden'.</div>