← Back to All Tags

<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

The <hr> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

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