How to change the thickness & colour of the
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;
}

Is your styling being overwritten? (for example bootstrap) – Stefan Neuenschwander Jan 21 '16 at 19:36 — Stefan Neuenschwander, Jan 21 '16 at 19:36

score 10 · Accepted Answer · answered Jan 21 '16 at 19:42

10

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">

answered Jan 21 '16 at 19:42

mmccaff

1,281
1
11
20

Thanks, it was the Bootstrap framework that was overwriting the styling! – Jamie Bohanna Jan 21 '16 at 23:37
Thanks , it was exactly what I wanted. – GoutamS Dec 05 '17 at 10:13
Is there any bootstrap 4 class available to increase the thickness of
tag ? – Vikrant Bhat Feb 28 '20 at 10:02

How to change the thickness & colour of the tag?

1 Answers1

How to change the thickness & colour of the
tag?