The 2-Minute Guide to the HTML Horizontal Line Element

You can do a lot in HTML. You can create line breaks. You can embed images. You can bold or italicize text. You can even create a thematic break using the HTML horizontal rule element.

In this post, we’ll walk through how to make a horizontal line and customize its color, width, and alignment on page.

Why Make a Horizontal Line in HTML

Let’s say you want to mark a change of scene in a play, a new section of an essay, or the conclusion of an article. In any of these cases, you could create a horizontal line to visually mark that change.

Check out this example on The Atlantic that marks the end of the article and beginning of the author’s bio.

Image Source

Now that we understand the benefit of a horizontal line, let's look at how to create one in HTML. 

To create a default horizontal line, I’m going to add the <hr> tag in between two paragraph elements. Here’s the code and the result:

See the Pen eYvVRWQ by Christina Perricone (@hubspot) on CodePen.

The <hr> element used to be non-semantic so you could style it using the following attributes.

However, in HTML5, the <hr> element became semantic. Semantic HTML is basically HTML code that says what it does. This is better for web accessibility since browsers, assistive reading technology, and other automated systems will be able to tell there is a thematic break. It also means the attributes above have been deprecated.

To style the <hr> element now, you need to use CSS. Let’s look at how to change the color, width, and position of a horizontal line using CSS below.

HTML Horizontal Line Color

You can use the CSS background-color property to set the color of the horizontal line element. But first, you have to specify the height of the <hr> element. You also have to set the border-width property to 0. Otherwise, the default gray horizontal line will appear stacked on top of the thicker, colored line you create.

Here’s an example:

See the Pen oNZEeJE by Christina Perricone (@hubspot) on CodePen.

HTML Horizontal Line Width

You can use the CSS width property to set the width of the horizontal line element. You can define this property with percentages or length values (px, pt, em, and rem are just a few).

Here’s an example:

See the Pen HTML Horizontal Line Width by Christina Perricone (@hubspot) on CodePen.

HTML Horizontal Line Alignment

You can use the CSS margin property to change the position of the horizontal line element. For example, if I want to make the line look left-aligned instead of centered, then I could set the margin-left property to 0. I’d also have to define the width of the <hr> element.

Here’s an example of a horizontal line styled with the width and margin properties:

See the Pen abJqLQa by Christina Perricone (@hubspot) on CodePen.

An Easy HTML Trick

Knowing the basics of HTML can be extremely helpful for digital marketers. It can free you from relying on a webmaster or freelance web developer for simple updates to your website or email newsletter — like creating a horizontal line across the page.

Editor's note: This post was originally published in July 2011 and has been updated for comprehensiveness.