<div class="box border-dotted">dotted</div>

<div class="box border-dashed">dashed</div>

<div class="box border-solid">solid</div>

<div class="box border-double">double</div>

<div class="box border-groove">groove</div>

<div class="box border-ridge">ridge</div>

<div class="box border-inset">inset</div>

<div class="box border-outset">outset</div>

​

body {

  display: grid;

  grid-gap: 30px;

  grid-template-columns: 1fr 1fr 1fr 1fr;

​

  font: 16px/1.5 monospace;

}

​

.box {

  width: 60px;

  height: 60px;

  padding: 20px;

  color: #220901;

  background: #ffeb3b;

  border-width: 10px;

  border-color: #ababab;

}

​

.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;

}