Styling the <Hr /> Element

Styling the hr / element

Change it to this:

hr {
    height: 1px;
    color: #ed1d61;
    background: #ed1d61;
    font-size: 0;
    border: 0;
}

Changing the color of an hr element

I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.

Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as @Ibu suggested in his answer).

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit }.

Styling an hr tag

try this:
http://jsfiddle.net/1md3phmo/5/

edits for hr:

 <hr style="background-color: red; height: 4px; border:none" width="20%">
  <hr style="background-color: blue; height: 4px;  border:none" width="20%">
  <hr style="background-color: purple; height: 4px;  bottom: 1px; border:none" width="20%">                          
  <hr style="background-color: orange; height: 4px; border:none" width="20%">
  <hr style="background-color: green; height: 4px;border:none" width="20%">

css

hr{float:left; margin:0;}

How do I fill an hr divider in CSS with a color?

You have to use background-color to fill an HR.

hr {
    height: 6px;
    background-color: black;
    border: 0;
}

Update: Added the border: 0; thanks to Roko C. Buljan comment.

styling additional hr tag?

use

hr.side { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }

then

<hr class="side">

in css the . refers to a class , and # to id

EDIT:

if you really really wanted to do inline styling with style="" then it would look like this

<hr style="border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0;">

This last method is not really the recommended way, but works great if you want to override all css style sheets, and also override any <style> </style> tags that are embedded in HTML page

styled-components does not style hr / element

Tag hr can not have children. U can use hr with styled-components in case it doesn't children.
U just use it like this: <Line />
Not like this: <Line>Hello</Line>
Your code Line must like this:

const Line = styled.hr`
  color: rgba(0, 0, 0, 0.65);
  margin-left: -100px;
`;

See the code sandbox: https://codesandbox.io/s/qxqzzko8oq

Style hr element to fit between two spans

You can follow these code:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="question-line-row">
    <span>Test Text</span>
    <hr class="true-and-false-line" />
    <span>test text</span>
</div>

</body>
</html>

Css:

.question-line-row{
  display: flex;
  align-items: center
}
.true-and-false-line{
  border-bottom: 2px solid red;
  flex: 1;
}
span{
  margin: 5px;
}

How can I change the thickness of my hr tag

For consistency remove any borders and use the height for the <hr> thickness. Adding a background color will style your <hr> with the height and color specified.

In your stylesheet:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Or inline as you have it:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Longer explanation here

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

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

Styling the <Hr /> Element