How can i change hr color using CSS?

You can style <hr> using CSS below

hr { background-color: yellow; height: 1px; border: 0; }

Or Another solution

hr{
   border: 1px solid yellow;
}

Remember,border-color works in Chrome and Safari
background-color works in Firefox and Opera
color works in IE7+

hr {
height: 1px;
color: yellow;
background-color: yellow;
border: none;
}

Try the above solution it will work for sure.

Also if you want to show your <hr> in various other designs, take a look at this URL, it has quite amazing designs with code

https://www.formget.com/css-hr/

Try using Border-top in CSS for changing hr color

hr {
    border-top: 1px solid red;
}

This is the easiest way.

OR

To keep hr 1px thick with changed color, you can try below CSS

hr {
  height: 0; 
  border: 0; 
  border-top: 1px solid red; 
}

This should help.