The Fancy Separator

A long post can be made easier to read with the use of horizontal rules to provide visual breaks in the text.  Styling these breaks is a quick way to add a little pizazz or elegance to a site, but styling with CSS is quite difficult.

https://codepen.io/ibrahimjabbari/pen/ozinB  provides some example separators with the associated CSS. Some of the nicest involve writing a character over the center of the line but the ones shown there seem to have  a problem. The HR shows up with an outline that’s different on FF versus Chrome. The solution seems to be to overlay with a 1 px border.

Where the examples show:

hr.style15 {
    border-top: 4px double #8c8b8b;
    text-align: center;
}

Add borders for the rest of the box:

hr.style15 {
    border-top: 4px double #8c8b8b;
  border-left: 1px;
  border-bottom: 1px;
  border-right: 1px;
    text-align: center;
}