HTML <hr> Tag

The <hr> tag creates a horizontal rule (i.e. line). These elements are used to separate different content areas. Horizontal rules can be styled with CSS to create great looking separator lines.

HTML Tag

Example

#

An <hr> tag.
This tag draws a horizontal line.


<hr />
hr = horizontal rule

Using <hr>

The <hr> tag creates a horizontal line or rule.

This element serves as a divider between separate content areas.

The <hr> tag does not have a closing tag.

Tip: Lines are also commonly created by adding a top or bottom border to a <div> element. Alternatively, you can also style borders on a <hr> element (see below).

More Examples

Two <article> elements separated by <hr> tags.


First article goes here

Second article goes here

<hr />
<article>First article goes here</article>
<hr />
<article>Second article goes here</article>
<hr />

Attributes for <hr>

The <hr> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
class    classnames Assigns one or more classnames to the hr element.
style    CSS-values Assigns CSS style values to the hr element.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below. They are no longer valid on the hr tag in HTML5. 

Attribute Description Alternative
align Aligns the rule on the page. CSS text-align
noshade Specifies that the horizontal rule has no shading. CSS box-shadow
size Defines the height of the horizontal rule in pixels. CSS height
width Sets the width of the horizontal rule. CSS width

Did you know?

Did you know?

You can style an <hr> with CSS

An <hr> element has a default background and height.

With CSS, the style of an <hr> element can be customized.

Two <hr> tags with their height, background, and shape adjusted by CSS.

First article goes here

Second article goes here

<article>First article goes here</article>
<hr style="height: 5px;background: teal;margin: 20px 0;box-shadow: 0px 0px 4px 2px rgba(204,204,204,1);">
<article>Second article goes here</article>
<hr style="height: 5px;background: teal;margin: 20px 0;box-shadow: 0px 0px 4px 2px rgba(204,204,204,1);">

More styling examples

Three <hr> elements that have their borders customized with CSS.






<hr style="background:transparent;border-top:3px solid lightblue;">
<br>
<hr style="background:transparent;border-top:3px dashed darkslateblue;">
<br>
<hr style="background:transparent;border-top:3px dotted orangered;">

Browser support

Here is when <hr> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides