Dofactory.com
Dofactory.com

HTML <hr> Tag

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.

Example

#

A basic <hr> tag that creates a horizontal line.


<hr />
hr = horizontal rule

Using <hr>

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).

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


Last updated on Sep 30, 2023




Guides