Changing the Color of an Hr Element

Changing the color of an hr element

I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.

Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as @Ibu suggested in his answer).

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit }.

How to change color of hr/ element?

Give hr a style with:

hr{
    border:0;
    margin:0;
    width:100%;
    height:2px;
    background:yellow;
}

border:1px solid yellow;

JsFiddle

You need to get rid of the border or change the border's properties for it work.

From @Darko Z in the comments:

In many browsers the default style for HR is to add some sort of shading to the border so this comes out as dirty #whateverColourYouWant. To get rid of it, setting border explicitly (and not just border-color) is necessary.

How to change color of hr element in XHTML without CSS?

tl;dr: You can't. Not only does hr not have a color attribute in XHTML, it never had a color attribute, in any version of HTML! Just use CSS already.

Longer answer:

I don't know why you don't want to use CSS. But if you're really serious about it, here's the solution.

It doesn't matter to the browsers if the code validates or not. If the color attribute works, it works, regardless of whether there's a definition for it in the DTD.

So what you're really trying to do is not get it to work, but only to get it to validate. And, well, that's entirely possible with XHTML. Not with HTML though, mind you; that's what the X in XHTML is for. It's eXtensible!

So just take a XHTML DOCTYPE declaration with a DTD and then append the definition for the color attribute to it.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
  [
    <!ATTLIST hr color CDATA #IMPLIED>
  ]
>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Colored hr without CSS</title>
 </head>
 <body>
  <hr color="red"/>
 </body>
</html>

There you go, a working and validating XHTML document. (Do save it as .xhtml though, not .html)

Disclaimer:

One other reason to not use the color attribute, aside from the reasons already mentioned, is that it suffers from compatibility issues. For example, if you happen to have a hr with both the color attribute and css, the results differ among browsers.

hr {color:blue}

<hr color="red">

CSS, HTML - Color change of HR element by button:active

Use the general sibling combinator ~:

button.nav-buttons:active~#hr-nav { border-color: red; }

For that to work, the button elements and the hr element need to have the same parent element.

If that is not the case, please add the relevant HTML structure to your question.

How can I change the thickness of my hr tag

For consistency remove any borders and use the height for the <hr> thickness. Adding a background color will style your <hr> with the height and color specified.

In your stylesheet:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Or inline as you have it:

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

Longer explanation here

Change hr style in HTML page

The appearance of <hr> in the browser is based on border styles and not dictated by the color property. Therefore, try using border-color instead:

hr {  border: none;  border-top: 1px solid whitesmoke;}

<hr>

hr color isn't clear

You have added opacity in your css

hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: .25;  //remove this

}

Changing the Color of an Hr Element