The <hr> tag is one of the more neglected and abused elements in HTML, at least in part because it doesn’t appear terribly exciting by default. Used in its raw state on a web page, a horizontal rule looks like this:

The purpose of the <hr> tag is an indicator of thematic change: a visual opportunity for the reader to catch their mental breath. The equivalent decoration is used to indicate a change of scene within the chapter of a book; in longer magazine articles, to introduce a new character or location. Of course, they don’t usually appear as simple grey lines: they are more commonly shown as fleur-de-lis or other decorative sigils.

There are a few things that horizontal rules should not be used for in web pages: they should not be used to add a line (that’s the purpose of border-bottom or top on an existing element, possibly through the use of border-image). They should be used for their specific purpose, after at least several paragraphs or at the extreme top or bottom of body copy.

Through the use of CSS, we can make our horizontal rules look like whatever we wish. The simplest effect is to turn them into boxes:

hr {
	width: 25px;
	height: 25px;
	border: none;
	background: #000;
	color: #000;
}

Note that the horizontal rule remains center-aligned. We can turn that element into diamonds by using CSS transform:

hr {
	width: 25px;
	height: 25px;
	border: none;
	background: #000;
	color: #000;
	transform: rotate(45deg);
}

We can also place a background-image in place to complete the effect:

hr {
	width: 200px; height: 200px;
	border: none;
	background: #fff;
	color: #fff;
	background-image: url(skull.png};
}

As this <hr> is something that will be used repeatedly on multiple pages, it makes sense to base64-encode the image:

hr {
	width: 200px;
	height: 200px;
	border: none;
	background: #fff;
	color: #fff;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAA…);
}

…producing the result you see at the start of this article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.