HTML hr tag

Use the <hr> tag to define thematic changes in the content

Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Browser Support

Element
<hr> Yes Yes Yes Yes Yes

Global Attributes

The <hr> tag also supports the Global Attributes in HTML.

Event Attributes

The <hr> tag also supports the Event Attributes in HTML.

More Examples

Example

Align a <hr> element (with CSS):

<hr style="width:50%;text-align:left;margin-left:0">

Example

A noshaded <hr> (with CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

Example

Set the height of a <hr> element (with CSS):

<hr style="height:30px">

Example

Set the width of a <hr> element (with CSS):

<hr style="width:50%">

Related Pages

HTML DOM reference: HR Object

Default CSS Settings

Most browsers will display the <hr> element with the following default values:

Example

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}