<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 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2em;
}

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

.box-1 {
  border: none;
}

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

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

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

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

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

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

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

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

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