Member Avatar for bcarancibia

Hi

I am having some trouble changing the color of my HR tag in HTML. All it is doing is making a HR but it is not changing the color. Any help would be greatly appreciated.

Thanks!

This is the code I am using:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.css" />
</head>

<body>

<h1>Email Preferences</h1>
<hr color="#FF0000" />


<table class="form-body">
<tbody>
<tr>
<td><a href="index.php?option=com_content&amp;view=article&amp;id=221"><span>Subscribe to Report of the Week</a>
</tr>
<tr>
<td><a href="index.php?option=com_content&amp;view=article&amp;id=222"><span>Unsubscribe to Report of the Week</a>
</tr>
<tr>
<td><a href="index.php?option=com_content&amp;view=article&amp;id=223"><span>Update Your Email Address</a>
</tr>
</table>
</tbody>
</html>
  • 2 Contributors
  • 3 Replies
  • 133 Views
  • 22 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Quick summary: the color attribute on <hr> is presentational and not reliable in modern browsers. was right to recommend removing the attribute and using CSS. A cleaner, more robust pattern is to give the rule a class and style its border rather than relying on the deprecated HTML attribute.

Example pattern to use:

<hr class="divider">

/* CSS */
.divider {
  border: 0;
  border-top: 3px solid #ff0000;
  margin: 1em 0;
}

Why this helps

  • border-top keeps the line crisp and avoids height/box-model quirks.
  • Using a class prevents styling every <hr> site-wide.
  • This approach works across engines and avoids deprecated HTML attributes.

Troubleshooting checklist if color still doesn’t change

  • Confirm the stylesheet actually loads (Network tab in DevTools shows 200). Clear browser cache or force-refresh.
  • Inspect the <hr> in DevTools and look at the computed styles to see which rule wins; a framework (Joomla template, Bootstrap, reset.css) may be overriding your rule.
  • Increase specificity (e.g., .form-body hr) or temporarily test with !important to confirm an override.
  • Ensure you’re in standards mode (correct doctype) — quirks mode can change rendering.
  • If you need a very thin hairline on high-DPI displays, consider using a 1px border-top or a subtle gradient.

References and further reading:

Note: keep <hr> for semantic thematic breaks. If the line is purely decorative, use an ARIA pattern or mark it with aria-hidden="true".

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Try applying this set of properties for maximum compatibility across browsers.

First remove the color attribute from the <hr> tag. Next apply this style in CSS.

hr {color: #FF0000; background-color: #FF0000;height: 1px; border:none;}

or if you just want to test it within the HTML page,

<hr style="color: #FF0000; background-color: #FF0000;height: 1px; border:none;" />

Member Avatar for bcarancibia

Awesome that works!

Thanks!
Member Avatar for JorgeM

Great! Take care...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.