How to Style Horizontal Strokes inside Blogger Posts (and elsewhere too, I guess)

For some inexplicable reason we no longer seem to have a handy little button at the top menu of the Compose Tab for Blogger posts. However, we can very easily add them from the HTML tab by inserting <hr> wherever we want a horizontal stroke to appear. But what we can also do is style this stroke to different thicknesses, colors, widths and even things like gradients. Something as easy as this does the job: Instead of just inserting <hr> which will give you the single pixel stroke, use this piece of code:

<hr style="height:Xpx;border:none;color:#XXXXX;background-color:#XXXXXX;" />

The way this works is that the <hr> tag makes a boundary stroke only. So, when you increase its thickness without adding a background color then all you get is a very thin border rectangle. Here is the height value in the code set to 5 pixels, with the colors set to #333:

<hr style="height:5px;border:none;color:#333;background-color:#333;" />

And the result is this:

 

---

And, as said above, one can play around quite a bit more with this: Here I have added a width percentage which is 50%, so now the stroke is centered at half the width of the post:

<hr style="background-color: #333333; border: none; color: #333333; height: 5px; width: 50%;" />

 
The result is this:

---

There is quite a bit more that one can try out by adapting the CSS codes on this page to HTML: https://css-tricks.com/examples/hrs/

Such as this rather lovely gradient stroke at the very top of that page:

---

The HTML code for which is this. All you need to do is paste whichever attribute you would like inside the HTML tags:

<hr style="height:1px;border:none;color:#333;background-color:#333;width: 50%;background-image: linear-gradient(to right, #ccc, #333, #ccc);" />