The <hr> tag creates a horizontal line.
These lines are used to separate different content areas.
Horizontal rules can be styled to create great looking separator lines.
A basic <hr> tag that creates a horizontal line.
<hr />
hr = horizontal rule
The <hr> element serves as a divider between separate content areas.
This 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).
Two <article> elements separated by <hr> tags.
<hr />
<article>First article goes here</article>
<hr />
<article>Second article goes here</article>
<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.
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 |
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.
<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);">
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;">
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 |
