How can i change hr color using CSS?

I am trying to change the color of <hr> line using the normal CSS code, but it is not working

color:yellow; //not working

but it is not working, how can I achieve it using CSS?What am I missing here?

Asked by:- jaya
: 3237 At:- 10/15/2017 8:31:29 AM
CSS hr-color html

3 Answers
profileImage Answered by:- pika

You can style <hr> using CSS below

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

Or Another solution

   border: 1px solid yellow;

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

At:- 10/16/2017 6:05:05 AM Updated at:- 10/16/2017 6:07:19 AM

profileImage Answered by:- vikas_jk
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

At:- 10/17/2017 10:18:28 AM

profileImage Answered by:- bhanu

Try using Border-top in CSS for changing hr color

hr {
    border-top: 1px solid red;

This is the easiest way.


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.

At:- 10/25/2021 7:20:09 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use