web analytics

CSS HR Lines Styling

The simple <hr> element is a useful tool to separate content on a post or page.
It is displayed as a horizontal line to visually divide, isolate, or separate text or content.

The HTML hr element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. [developer.mozilla.org]

In many instances, the author may want to provide a much more richer experience in writing the post, by customizing the <hr> line. Examples would be: Color, size and style (dots, stars, gradients, and so forth).

In the video tutorial below, I go through some of the popular and most useful lines using simple CSS to style the <hr> tag.

Gerald Watanabe

Leave a Comment