Changing the color of an hr element

user_726212 0
Viewed 1293370

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;
}
css html
27 Answers
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

user_30683290

You can add bootstrap bg class like

<hr class="bg-light" />
user_58228440

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/

user_27299370

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).

user_121214160

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.

user_77038030

I took a bet each way:

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