How to Change an HR Element Color with CSS

You will learn why color usually does not control an <hr> line, how browsers draw horizontal rules, and the reliable CSS patterns for setting an <hr> color, thickness, and style.

The HTML <hr> element represents a thematic break between sections of content. Although it is commonly displayed as a horizontal line, the line is usually drawn using a border, not text.

The CSS color property controls the foreground color of text and other elements that explicitly inherit or use that color. An <hr> has no visible text, so changing color alone often has no visible effect.

To change the line reliably, style the border that creates it:

hr {
  border: 0;
  border-top: 2px solid #123455;
}

Resetting the default border first is important because browsers may apply their own 3D, inset, or shaded border styles to <hr>. After resetting it, border-top gives you one predictable line.

Think of color as the ink color used for writing words. An <hr> is not a word written in ink; it is more like a divider made from a strip of material.

To repaint that divider, change its border. Alternatively, you can remove its border and make the element itself a thin colored rectangle with background-color.

Use a border for the most common horizontal-rule style:

hr {
  border: 0;
  border-top: 2px solid #123455;
}

<p>Introduction</p>
<hr>
<p>Next section</p>

• border: 0 removes the browser's default borders.
• border-top creates one line along the top edge.
• 2px is the line thickness.
• solid is the border style.
• #123455 is the color.

Using a background instead

This approach treats <hr> as a thin block of color:

hr {
  height: 4px;
  border: 0;
  background-color: #123455;
}

Use this when you want a thicker bar rather than a conventional border line.

Other border styles

hr.dashed {
  border: 0;
  border-top: 2px dashed tomato;
}

hr.dotted {
  border: 0;
  border-top: 3px dotted rebeccapurple;
}

Consider this page:

<p>Account settings</p>
<hr class="section-divider">
<p>Notification preferences</p>

.section-divider {
  border: 0;
  border-top: 3px solid #123455;
  margin: 24px 0;
}

What happens:

1. The browser creates an <hr> between the two paragraphs.
2. The section-divider class matches the CSS selector.
3. border: 0 removes any default border supplied by the browser.
4. border-top: 3px solid #123455 draws a 3-pixel solid line on the top edge.
5. margin: 24px 0 adds 24 pixels of space above and below the divider, with no extra left or right margin.
6. The result is a predictable dark-blue section separator.

Horizontal rules are useful when content needs a clear visual separation without introducing another heading.

• Article pages: separate an introduction from the body or show a transition to related content.
• Settings screens: divide groups such as profile, security, and notification options.
• Invoices and receipts: separate line items from totals.
• Email templates: add visual breaks between product sections.
• Dashboards: distinguish panels, filter areas, and report summaries.
• Printed CSS: create simple visual separators that remain meaningful in a document layout.

In production stylesheets, developers often create a reusable divider class rather than styling every <hr> globally:

.divider {
  border: 0;
  border-top: 1px solid #d0d7de;
  margin-block: 1rem;
}

.divider--strong {
  border-top-width: 3px;
  border-top-color: #123455;
}

<hr class="divider">
<hr class="divider divider--strong">

This pattern keeps default dividers consistent while allowing intentional variants.

A CSS custom property can make the component fit a design system:

.divider {
  --divider-color: #d0d7de;
  border: 0;
  border-top: 1px solid var(--divider-color);
}

.dark-theme .divider {
  --divider-color: #475569;
}

Use semantic <hr> elements for genuine thematic breaks. If the line is purely decorative and has no document meaning, a styled <div> or a pseudo-element may be more appropriate.

Expecting color to color the line

/* Usually not the property that draws the visible rule. */
hr {
  color: #123455;
}

Use border-top-color or the border-top shorthand instead.

hr {
  border: 0;
  border-top: 2px solid #123455;
}

Leaving an unwanted default border

hr {
  border-top: 2px solid #123455;
}

This can leave other default border sides visible in some browser styles. Reset the border first:

hr {
  border: 0;
  border-top: 2px solid #123455;
}

Using background-color without setting a height

hr {
  border: 0;
  background-color: #123455;
}

A background may not be visible if the element has no useful height. Set one:

hr {
  height: 3px;
  border: 0;
  background-color: #123455;
}

Forgetting selector specificity

A more specific rule can override your style:

.content hr {
  border-top-color: red;
}

If your hr rule does not apply, inspect the element in browser developer tools to find the winning CSS rule. Prefer a purposeful class such as .divider instead of relying on !important.

border-top versus border

/* One horizontal line: preferred for a normal divider */
hr {
  border: 0;
  border-top: 1px solid #999;
}

/* Borders on all four sides: usually creates a box, not just a line */
hr {
  border: 1px solid #999;
}

/* Reliable colored horizontal rule */
hr {
  border: 0;
  border-top: 2px solid #123455;
}

/* Dashed divider */
hr {
  border: 0;
  border-top: 2px dashed #123455;
}

/* Thick colored bar */
hr {
  height: 4px;
  border: 0;
  background-color: #123455;
}

• color is primarily for text/foreground color; do not rely on it for <hr>.
• Reset browser defaults with border: 0 before adding a single border edge.
• Use border-top when the divider should be a line.
• Use height and background-color when it should be a filled bar.
• Use a class such as .divider for reusable project styles.

Why does color not change my <hr> color?

Browsers generally render the visible <hr> line as a border. The color property does not directly set that border, so use border-top-color or border-top.

What is the simplest CSS to color an <hr>?

hr {
  border: 0;
  border-top: 1px solid #123455;
}

How do I make an <hr> thicker?

Increase the border width:

hr {
  border: 0;
  border-top: 4px solid #123455;
}

Can I create a dashed horizontal rule?

Yes. Use a border style such as dashed or dotted:

hr {
  border: 0;
  border-top: 2px dashed #123455;
}

Should I use <hr> or a <div> for a divider?

Use <hr> when the divider represents a meaningful thematic break in the content. Use a decorative element or pseudo-element when it is only visual decoration.

Why does my divider still look different in another browser?

Browsers have different default <hr> styles. Explicitly setting border: 0 and then defining the border you want avoids those defaults.

Can an <hr> have a gradient color?

Yes, use a background and height rather than a solid border:

hr {
  height: 3px;
  border: 0;
  background: linear-gradient(to right, #123455, #60a5fa);
}

• CSS borders — Borders control the standard visible line of an <hr>.
• CSS color property — Explains the difference between text color and border/background color.
• CSS background-color — Useful for creating thick divider bars.
• CSS box model — Helps explain borders, dimensions, and margins around elements.
• CSS selectors and specificity — Needed when another stylesheet rule overrides the divider style.
• HTML semantic elements — Helps determine when <hr> is appropriate for a thematic break.
• CSS custom properties — Useful for reusable divider colors in a design system.