How to change the thickness & colour of the <hr> tag?

Question

I can see this has been answered but i've tried all of the solutions yet still have a barely visable HR.

What am I doing wrong?

hr {
    background-color: dimgrey;
    color: dimgrey;
    border: solid 2px dimgrey;
    height: 5px;
    width: 1000px;
}

Answer 1

Not sure what you consider barely visible but a 5px height is pretty visible. :)

Make sure that you are defining this css after other css which might be overwriting this rule.

Or, use !important to give this rule precedence:

hr {
    background-color: dimgrey !important;
    color: dimgrey !important;
    border: solid 2px dimgrey !important;
    height: 5px !important;
    width: 1000px !important;
}

Another approach is to define a custom class for this style:

.bigHr {
    background-color: dimgrey !important;
    color: dimgrey !important;
    border: solid 2px dimgrey !important;
    height: 5px !important;
    width: 1000px !important;
}

... and then use that class when you want this style:

<hr class="bigHr">