<div class="box box-1">
  none
</div>

<div class="box box-2">
  hidden
</div>

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

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

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

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

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

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

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

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

body {
  font-family: sans-serif;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px;
}

.box {
  background: gainsboro;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 17%;
  height: 150px;
  margin-bottom: 1em;
}

.box-1 {
  border: none;
}

.box-2 {
  border: 5px hidden red;
}

.box-3 {
  border: 5px solid red;
}

.box-4 {
  border: 5px dashed red;
}

.box-5 {
  border: 5px dotted red;
}

.box-6 {
  border: 5px double red;
}

.box-7 {
  border: 5px groove red;
}

.box-8 {
  border: 5px ridge red;
}

.box-9 {
  border: 5px inset red;
}

.box-10 {
  border: 5px outset red;
}