CSS border-style Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 18px;
}

.row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 28%;
  min-width: 160px;
  padding: 18px;
  text-align: center;
  background: #ffffff;
  border-width: 6px;
  border-style: solid;
  border-color: #333333;
  box-sizing: border-box;
}

.box.solid { border-style: solid; }
.box.dashed { border-style: dashed; }
.box.dotted { border-style: dotted; }
.box.double { border-style: double; }
.box.groove { border-style: groove; }
.box.ridge { border-style: ridge; }
.box.inset { border-style: inset; }
.box.outset { border-style: outset; }
.box.none { border-style: none; }
</style></head><body><div class="container">
  <h1>CSS border-style examples</h1>
  <div class="row">
    <div class="box solid">solid</div>
    <div class="box dashed">dashed</div>
    <div class="box dotted">dotted</div>
  </div>
  <div class="row">
    <div class="box double">double</div>
    <div class="box groove">groove</div>
    <div class="box ridge">ridge</div>
  </div>
  <div class="row">
    <div class="box inset">inset</div>
    <div class="box outset">outset</div>
    <div class="box none">none</div>
  </div>
</div></body></html>