How To Make Horizontal Lines <HR> In HTML & CSS 👩‍💻

Last Updated - Sat Jan 09 2021

horizontal-lines-2816031 Its easy to add horizontal lines using either HTML or CSS, but it may not work like you think.

Horizontal lines are a way to separate content and can be done using the HTML HR element or CSS border rules.

Today I will show you how to use the HTML U element to add semantic meaning to your underlines and CSS to dress them up. You will also learn how to use just CSS to add underlines to text and content.

HTML has the hr tag to declare a thematic break for content. In older HTML specifications the HR tag was just a horizontal rule and did not provide the semantic meaning it does now. Today it does not provide a visible break, but should be styled using CSS. This gives more control to the designer to make the HR tag match the site's theme.

HTML Underlines Using the HR Element

Since the beginning of HTML, or at least as far back as I can remember the U element has been a quick and dirty way to insert a horizontal line or horizontal rule to a web page. The U element is great because it can be used for the following scenarios:

Thematic Break
Semantics
Better Visual Perception
No Closing Tag

Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element.

Originally the HR element was styled using attributes. Today, with HTML5, the HR tag has become semantic, which means it tells the browser, assistive reading technology and other automated system there is a paragraph-level thematic break.

This is a break in the content flow, but not a new page. It better serves as a visual queue of a change in topic. For example, you could place them at the end of a section, before a new sub-header.

HTML Horizontal Line Color, Size and Other Styles with CSS

Today the HTML HR element is styled with CSS rather than attributes. Not only does this use the right system (CSS) to define rendering rules it allows you to reuse the same rule many times. This makes your code more maintainable and your layouts more consistent.

Browsers render the line by applying the styles to a combination of the background and border styles. The border is the primary style for the default line. Removing the border also removes the line.

style="border: none;">

Why would you want to do this?

An invisible line can still be useful to provide the semantic information to the user agent without visual clutter that may interfere with the desired user experience.

The common browser HR default styles are:

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}

You can control the line's width by setting the width property and then centering it using the following CSS rule.

hr {width: 60%;margin-left: auto;margin-right: auto;}

You can also adjust the line's thickness by setting the height value. Color is set using the background-color property. As a bonus you can also use the opacity property to make the line semi-transparent.

hr {width: 300px;margin-left: auto;margin-right: auto;height: 100px;background-color:#666;opcaity: 0.5;}

The typical browser sets the margin to roughly half a character's width. But you can change this to any value you want. This can add quality white space to your layouts and emphasize the content break.

hr {width: 80%;height: 8px;margin-left: auto;margin-right: auto;background-color:#666;border: 0 none;margin-top: 100px;margin-bottom:100px;}

You can apply many different style variations to your horizontal lines. You are not limited to just color and width. Here I set the horizontal line's background style to an image of 5 yellow stars. I then made them repeat on the x-axis while centering the line.

Pro-tip: set the background color to transparent so you don't accidentally show a color behind the image.

 .five-star-line { height: 20px; background-image: url(img/5-star-rating.png); background-repeat: repeat-x; background-position: center; background-color: transparent; border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

five-star-horizontal-line

Adjusting the border size, color, and style will make the line look different and has the same effect in all modern browsers. For example, in this demonstration the border is red, dashed, and 1px wide:

Having Fun Applying Styles to Horizontal Lines

A few weeks ago I published an article on making background stripes using CSS. Because you can apply those same background rules to a horizontal line you can do some pretty interesting things with the HR element.

But first, let's look at a few simple CSS tricks. This first example changes the line's style to be a dashed line.

 .striped-border { border: 1px dashed #000; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

striped-horizontal-line

Now, apply one of the stripe techniques to the horizontal line. Here I use linear-gradients to make the affect. The horizontal line's border is cleared and the size is set to 40px. The 40px is arbitrary, the important thing is to make the first two linear gradients half the HR's height. You will also need to set the background-size to match the height.

.zig-zag { border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 40px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 40px 40px; background-color: #EC173A;}

zig-zag-horizontal-line

Transforming HR Elements

With CSS3, you can also make your lines more interesting. The HR element is traditionally a horizontal line, but with the CSS transform property, you can change how they look. A favorite transformation on the HR element is to change the rotation.

You can rotate your HR element so that it's just slightly diagonal:

 .incline-line{ width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; transform: rotate(10deg); border-color: purple; }

incline-horizontal-line

Or you can rotate it so that it's completely vertical:

 .vertical-line{ width: 50%; margin: auto; margin-top: 50%; margin-bottom: 50%; transform: rotate(90deg); border-color: purple; }

You should apply this with caution as this can cause unwanted disruptions to your layout. But it is good to know you can apply transforms to the HR element.

Summary

Horizontal lines are a great way to add visual value to your layouts. The HTML HR element provides semantic meaning to a page's layout. It can only be customized using CSS. But you can apply all sorts of crazy styles to a horizontal line to create very interesting layout affects.