<!-- https://www.sitepoint.com/community/t/firefox-windows-not-recognising-border-style-inset/363267/4 -->
<h1>Border test</h1>

<div class="container">
  <div>solid</div>
  <div>dotted</div>
  <div>dashed</div>
  <div>double</div>
  <div>groove</div>
  <div>inset</div>
  <div>outset</div>
  <div>ridge</div>
</div>
<p>When you use black for the border-color Chrome shows groove,imset,outset and ridge as solid. Change to another color and all is ok.</p>

<div class="container container2">
  <div>solid</div>
  <div>dotted</div>
  <div>dashed</div>
  <div>double</div>
  <div>groove</div>
  <div>inset</div>
  <div>outset</div>
  <div>ridge</div>
</div>

body {
  background-color: #f0f0f0;
  font: normal 1em / 1.62em sans-serif;
}

h1 {
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container div {
  width: 23%;
  padding: 1em;
  margin: 0.5em 0;
  box-sizing: border-box;
  border: 15px solid black;

  background: #fff;
  text-align: center;
}

.container div:nth-child(1) {
  border-style: solid;
}

.container div:nth-child(2) {
  border-style: dotted;
}

.container div:nth-child(3) {
  border-style: dashed;
}

.container div:nth-child(4) {
  border-style: double;
}
.container div:nth-child(5) {
  border-style: groove;
}

.container div:nth-child(6) {
  border-style: inset;
}

.container div:nth-child(7) {
  border-style: outset;
}

.container div:nth-child(8) {
  border-style: ridge;
}

.container2 div {
  border-color: red;
}

p {
  text-align: center;
  font-weight: bold;
  background: #ccc;
  padding: 10px;
}