JSFiddle - React, Tailwind, and code Playground

HTML

<p>In this section, a <code>border-style: dashed</code> rule has been applied to these <code>div</code> elements, using a selector with <a href="http://www.w3.org/TR/CSS2/cascade.html#specificity">higher specificity</a>.</p>

<p>The <a href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">initial value for <code>border-width</code> is <code>medium</code></a> and the <a href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">initial value for <code>border-color</code> is the same color as <code>color</code> property</a>. Whenever we override the <code>border-style</code> property, we can clearly see the medium border with the same color as the text.</p>

<section class="inheritance style">
  <div class="hidden">border: hidden;</div>
  <div class="zero">border: 0;</div>
  <div class="none">border: none;</div>
  <div class="stylehidden">border-style: hidden;</div>
  <div class="widthzero">border-width: 0;</div>
  <div class="stylenone">border-style: none;</div>
</section>

CSS

div {
  //border: 1px solid blue;
}
.hidden      { border: hidden; background: #FDD; }
.zero        { border: 0;      background: #DFD; }
.none        { border: none;   background: #DDF; }
.stylehidden { border-style: hidden; background: #FFD; }
.widthzero   { border-width: 0;      background: #DFF; }
.stylenone   { border-style: none;   background: #FDF; }

.inheritance.style > div {
  border-style: dashed;
}

/* Styling/layout rules below, unrelated to the borders. */

html, body {
  font-family: Arial, "Liberation Sans", "DejaVu Sans", sans-serif;
  font-size: 14px;
  background: white;
  color: black;
}

.inheritance > div {
  display: inline-block;
  width: 30%;
  padding: 1ex;
  margin: 1ex;
  box-sizing: border-box;
}

code {
  background: #eee;
  padding: 1px 5px;
  white-space: pre-wrap;
}