How to Style your HRs

A short demo of how to style your HRs

by RedDevil

HTML

<div class="content">
  <h1>How to Style your HRs</h1>
  
  <p>Hello there. This primer will make you a pro in how to style HR elements in the simplest way.</p>

  <p>This is a simple hr element - black, inoffensive, but insiduous!</p>
  <hr class="default">
  <p>If you think the line above is a <em>simple</em> line which can be controlled by a simple <code>border-color</code>, think again! Here, let's try to make it a pretty cornflower shade of blue.</p>
  <hr class="blue">

  <p>See that double black/blue line like? No? Here, I've increased the border-width as a temporary cure to your presbyopic eyes - a 40px fat HR (<code>border-width: 20px</code>).</p>
  <hr class="fat blue">
  <p>Surprised? Here is the same border with some other colour:</p>
  <hr class="fat orange">

<p>So, how to go about this? First, close your eyes. Accept that you didn't know shit about this. Take deep breaths. Now, open your eyes. Now, come to the realization that the hr element uses a special border, which is halfway between a <code>solid</code> and <code>ridge</code> border.</p>
<p>This is an HR with ridged border:</p>
  <hr class="fat ridge">

  <p>Now, with that realization completely hardcoded into your brain, hardcode <code>solid</code> as the HR's border type.</p>
  <hr class="fat solid">

  <p>And now, the coup de grâce - let's shrink the hr back to it's original width (height?), and give it that old shade of cornflower blue!</p>
  <hr class="solid blue">

  <p>So, what you learned is that all you need to get beautiful, compliant HR elements in your design is these two lines of css:</p>

  <pre>
  <code>
    hr {
      border-color: cornflowerblue;
      border-style: solid;
    }
  </code>
</pre> Fin
  <p><em><small>Disclaimer: No HRs were hurt while compiling this primer, except maybe the ones hardcoded into your brain.</small></em></p>
</div>

CSS

.content {
  font-family: "Segoe UI", -apple-system, Ubuntu, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.fat {
  border-width: 20px;
}

.solid {
  border-style: solid;
}

.ridge {
  border-style: ridge;
}

.blue {
  border-color: cornflowerblue;
}
.orange {
  border-color: orange;
}

pre {
  text-align: left;
}

code {
  color: green;
}