[html] Changing the color of an hr element

I want to change the color of my hr tag using CSS. The code I've tried below doesn't seem to work:

hr {
    color: #123455;
}

1. Code Works For older IE

2. Tried For Many Colors

   <hr color="black">
   <hr color="blue">
   

hr
{
  background-color: #123455;
}

the background is the one you should try to change

You can also work with the borders color. i am not sure i think there are crossbrowser issues with this. you should test it in differrent browsers

I'm testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:

hr.light { _x000D_
    width:70%; _x000D_
    margin:0 auto; _x000D_
    border:0px none white; _x000D_
    border-top:1px solid lightgrey; _x000D_
}

<hr class="light" />

I believe this is the most effective approach:

<hr style="border-top: 1px solid #ccc; background: transparent;">

Or if you prefer doing it on all hr elements write this on you CSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

Using font colours to modify horizontal rules makes them more flexible and easy to use.

The color property isn't inherited by default, so the following needs to be added to hr's to allow color inheritance:

/* allow hr to inherit color */_x000D_
hr { border: 1px solid;}_x000D_
_x000D_
/* reusable colour modifier */_x000D_
.fc_-alpha { color: crimson;}

normal hr:_x000D_
_x000D_
<hr>_x000D_
_x000D_
hr with <span class="fc_-alpha">colour modifier</span>:_x000D_
_x000D_
<hr class="fc_-alpha">

if u use css class then it will be taken by all 'hr' tags , but if u want for a particular 'hr' use the below code i.e, inline css

<hr style="color:#99CC99" />

if it's not working in chrome try below code:

<hr color="red" />

Well, I am new in HTML, CSS and in Java but I tried my way which worked for me in all browsers. I have used JS instead of CSS which doesn't work with some browsers.

First of all I have given id="myHR" to HR element and used it in Java Script.
Here is the Code.

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

You could do this :

hr {_x000D_
  border: 1px solid red;_x000D_
}

<hr />_x000D_
This s a test_x000D_
<hr />

Since i don't have reputation to comment, i will give here a few ideas.

if you want a css variable height, take off all borders and give a background color.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

In both ways, if you set a width, it will always have it's size.

No need to set display:block; for this.

To be totally safe, you can mix both, 'cause some browsers can get confused with height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

With this method you can be sure that it will have at least 2px in height.

It's a line more, but safety is safety.

This is the method you should use to be compatible with almost everything.

Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.

In the worst cases, you can try to add color:blue;.

In the worst of the worst cases, you can try to use a <font color="blue"></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.

With this method, you WILL want to do like this: <hr width="50" align="left"/>.

Example:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

Here is a link for you to check: http://jsfiddle.net/sna2D/

I think this can be useful. this was simple CSS selector.

hr { background-color: red; height: 1px; border: 0; }

<hr>

• border-color works in Chrome and Safari.
• background-color works in Firefox and Opera.
• color works in IE7+.

You can add bootstrap bg class like

<hr class="bg-light" />

Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.

hr {
    border-top: 1px solid red;
}

See the Fiddle.

hr
{
color: #f00;
background-color: #f00;
height: 5px;
}

I like the answers setting border-top, but they are somehow still a little off in Chrome...
BUT if I set border-top: 1px solid black; and border-bottom: 0px; I end up with a truly single line (that also works fine with higher thickness).

You should set border-width to 0; It works well in Firefox and Chrome.

hr {_x000D_
  clear: both;_x000D_
  color: red;_x000D_
  background-color: red;_x000D_
  height: 1px;_x000D_
  border-width: 0;_x000D_
}

<hr />_x000D_
This is a test_x000D_
<hr />

Some browsers use the color attribute and some use the background-color attribute. To be safe:

hr{
    color: #color;
    background-color: #color;
}

I took a bet each way:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }

As a general rule, you can’t just set the color of a horizontal line with CSS like you would anything else. First of all, Internet Explorer needs the color in your CSS to read like this:

“color: #123455”

But Opera and Mozilla needs the color in your CSS to read like this:

“background-color: #123455”

So, you will need to add both options to your CSS.

Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser. Here is a sample code of what your CSS should look like to get the blue horizontal line.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

Or you could just add the style to your HTML page directly when you insert a horizontal line, like this:

<hr style="background:#123455" />

Hope this helps.

You can give the <hr noshade> tag and go to your css file and add :

hr {_x000D_
    border-top:0;_x000D_
    color: #123455;_x000D_
}

<hr noshade />_x000D_
This s a test_x000D_
<hr noshade />

Only border-top with color is enough to make the line in different color.

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

After reading all the answers here, and seeing the complexity described, I set upon a small diversion for experimenting with HR. And, the conclusion is that you can throw out most of the monkeypatched CSS you wrote, read this small primer and just use these two lines of pure CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

That is ALL you need to style your HRs.

• Works cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
• No "I think this will work...", "you need to keep Safari/IE in mind...", etc.
• no extra css - no height, width, background-color, color, etc. involved.

Just bulletproof colourful HRs. It's that simple^TM.

Bonus: To give the HR some height H, just set the border-width as H/2.

It's simple and my favorite.

<hr style="background-color: #dd3333" />

You can use CSS to make a line with a different color, example would be like that:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

that code will display vertical grey line.

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

This will keep the Horizontal Rule 1px thick while also changing the color of it

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

Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS