Как изменить толщину и цвет тега <hr>?

Question

Я могу видеть, что на это ответили, но я попробовал все решения, но все еще имею едва заметный HR.

Что я делаю неправильно?

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

Answer 1

Не уверен, что вы считаете едва видимым, но высота 5 пикселей довольно заметна.:)

Убедитесь, что вы определяете этот CSS после другого CSS, который может перезаписывать это правило.

Или используйте! Важное, чтобы дать этому правилу приоритет:

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

Другой подход заключается в определении пользовательского класса для этого стиля:

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

... а затем использовать этот класс, когда вы хотите этот стиль:

<hr class="bigHr">