[meson1]

I needed to mark up a book with two different types of separator. One a solid line and the other a dashed line, both in the centre of the page. A regular <hr/> accompanied with identical left and right margins to center it worked fine.

But once I started trying to show two different styles I struggled to get my Kobo Aura HD to render <hr/> separators properly. They displayed fine in Sigil and fine in Calibre. But the Kobo was showing them in a barely visible grey colour until I came up with the following:

hr.line {
    border-color: black;
    border-top: medium solid black;
    border-left: none;
    border-right: none;
    border-bottom: none;
    height:0px;
    margin-bottom: 2em;
    margin-left: 42%;
    margin-right: 42%;
    margin-top: 2em;
    }
hr.dashes {
    border-color: black;
    border-top: medium dashed black;
    border-left: none;
    border-right: none;
    border-bottom: none;
    height:0px;
    margin-bottom: 2em;
    margin-left: 42%;
    margin-right: 42%;
    margin-top: 2em;
    }

And the html:

<hr class="line" />

or

<hr class="dashes" />