<hr>

Defines a thematic change in the content

Definition and Usage

The <hr> element establishes a thematic break in an HTML page, and is most often displayed as a horizontal rule that is used to separate content or define a change.

The <hr> element is a void element (self-closing), which means it has no closing tag. It creates a horizontal line that represents a thematic break between paragraph-level elements.

Note: The <hr> tag is a semantic element that indicates a thematic change or topic shift, not just a visual separator. Use it when you want to denote a transition between different topics or sections.

Tip: The <hr> tag is a self-closing/void element. In HTML5, you can write it as <hr> or <hr /> - both are valid.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Examples

Basic HR

Create a simple thematic break:

Example
<h2>Introduction</h2>
<p>This is the introduction section.</p>

<hr />

<h2>Main Content</h2>
<p>This is the main content section.</p>

Styled HR

Style the horizontal rule with CSS:

Example
<style>
  hr {
    border: none;
    height: 2px;
    background-color: #3b82f6;
    margin: 32px 0;
  }
</style>

<p>First section of content.</p>
<hr>
<p>Second section of content.</p>

HR with Different Colors

Create horizontal rules with various colors:

Example
<style>
  .hr-blue {
    border: none;
    height: 3px;
    background-color: #3b82f6;
  }

  .hr-green {
    border: none;
    height: 3px;
    background-color: #10b981;
  }

  .hr-red {
    border: none;
    height: 3px;
    background-color: #ef4444;
  }
</style>

<hr class="hr-blue">
<hr class="hr-green">
<hr class="hr-red">

Dashed and Dotted HR

Create dashed or dotted horizontal rules:

Example
<style>
  .hr-dashed {
    border: none;
    border-top: 2px dashed #6b7280;
    margin: 24px 0;
  }

  .hr-dotted {
    border: none;
    border-top: 3px dotted #3b82f6;
    margin: 24px 0;
  }
</style>

<p>Content before dashed line</p>
<hr class="hr-dashed">
<p>Content after dashed line</p>

<hr class="hr-dotted">
<p>Content after dotted line</p>

Gradient HR

Create a horizontal rule with gradient effect:

Example
<style>
  .hr-gradient {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: 2px;
    margin: 32px 0;
  }

  .hr-fade {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  }
</style>

<hr class="hr-gradient">
<hr class="hr-fade">

HR with Text

Create a divider with centered text:

Example
<style>
  .divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 32px 0;
  }

  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #d1d5db;
  }

  .divider::before {
    margin-right: 16px;
  }

  .divider::after {
    margin-left: 16px;
  }
</style>

<div class="divider">OR</div>

Deprecated Attributes (HTML 4.01)

The following attributes were used in HTML 4.01 but are now deprecated. Use CSS instead:

Attribute	Description	CSS Alternative
`align`	Alignment of the hr (left, center, right)	`margin-left`, `margin-right`
`size`	Height of the hr in pixels	`height`
`width`	Width of the hr	`width`
`noshade`	Removes 3D shading effect	`border: none;`

Deprecated: Do NOT use these attributes in modern HTML. Always use CSS for styling horizontal rules.

CSS Styling for HR

Modern HR Designs

Example
<style>
  /* Thick colored bar */
  .hr-thick {
    border: none;
    height: 8px;
    background-color: #3b82f6;
    border-radius: 4px;
  }

  /* Shadow effect */
  .hr-shadow {
    border: none;
    height: 3px;
    background-color: #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Double line */
  .hr-double {
    border: none;
    border-top: 3px double #3b82f6;
    margin: 24px 0;
  }

  /* Centered short line */
  .hr-short {
    border: none;
    height: 4px;
    width: 100px;
    background-color: #3b82f6;
    margin: 24px auto;
  }
</style>

<hr class="hr-thick">
<hr class="hr-shadow">
<hr class="hr-double">
<hr class="hr-short">

Pattern HR

Example
<style>
  .hr-pattern {
    border: none;
    height: 20px;
    background-image: repeating-linear-gradient(
      45deg,
      #3b82f6,
      #3b82f6 10px,
      #60a5fa 10px,
      #60a5fa 20px
    );
  }

  .hr-wavy {
    border: none;
    height: 10px;
    background-image: repeating-radial-gradient(
      circle at 10px,
      transparent 0,
      #3b82f6 10px,
      transparent 20px
    );
  }
</style>

<hr class="hr-pattern">
<hr class="hr-wavy">

When to Use <hr>

Use <hr> for:

Topic transitions within a document or article
Scene changes in stories or narratives
Separating different types of content
Marking thematic breaks between sections
Indicating a shift in context or subject matter

Don't use <hr> for:

Pure visual decoration (use CSS borders or backgrounds instead)
Creating spacing between elements (use margins/padding)
Drawing lines in forms or layouts (use CSS)
Separating navigation items (use proper semantic markup)

Accessibility Considerations

Semantic Meaning: Screen readers announce <hr> as a "separator" or "horizontal rule"
Context: The <hr> element conveys thematic separation to assistive technologies
ARIA Role: The <hr> has an implicit ARIA role of separator
Visual Only: If used purely for decoration, consider using CSS borders instead
Navigation: Users can skip over <hr> elements when navigating with screen readers
Contrast: Ensure sufficient color contrast if styling the hr for visibility

Accessibility Tip: Use <hr> only when you want to indicate a thematic break. For purely visual separators, use CSS instead to avoid confusing screen reader users.

Best Practices

Semantic Use: Use <hr> for thematic breaks, not just visual styling
CSS Styling: Always style with CSS, never use deprecated HTML attributes
Spacing: Add appropriate margin above and below for visual separation
Responsive Design: Ensure hr elements look good on all screen sizes
Consistency: Use consistent styling throughout your website
Void Element: Remember that <hr> is self-closing, no closing tag needed
Alternative: Consider using section elements or headers instead when appropriate

Related Tags

<br>
Line break
<div>
Division/section container
<section>
Thematic grouping
<p>
Paragraph