Border Style Property - CSS

The border-style property sets the style of an element's for borders. List of all the border styles as shown on below sample.

DEMO

Solid

Dotted

Dashed

Double

Groove

Ridge

Inset

Outset

HTML

<article class="grid-box">
  <div class="solid">Solid</div>
  <div class="dotted">Dotted</div>
  <div class="dashed">Dashed</div>
  <div class="double">Double</div>
  <div class="groove">Groove</div>
  <div class="ridge">Ridge</div>
  <div class="inset">Inset</div>
  <div class="outset">Outset</div>	
</article>

CSS

.grid-box {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.5em;
}
.grid-box div {
  border-width: 6px;
  padding: 0.5em;
  border-color: hotpink;
}
.grid-box div.solid {
  border-style: solid;
}
.grid-box div.dotted {
  border-style: dotted;
}
.grid-box div.dashed{
  border-style: dashed;
}
.grid-box div.double{
  border-style: double;
}
.grid-box div.groove{
  border-style: groove;
}
.grid-box div.ridge{
  border-style: ridge;
}
.grid-box div.inset{
  border-style: inset;
}
.grid-box div.outset{
  border-style: outset;
}