How to change color of <hr> element with css.


Here, we will learn on how to change the color of HR element in our HTML using CSS style.

Before starting , let us know a bit about HR element and why it is use.

HTML < hr > Tag

The <hr> tag stands for horizontal rule (thematic break) and it is use to insert a horizontal line in a Html Page. It is use as a divider or a separator between two html component.

Attributesdescription
alignspecify alignment in a hr element
widthuse to give a width to hr element
heightUse to give height to hr element
noshadeno shading effects to hr element
colorUse to set color to hr element

Now to change the color of HR element , you can try any of the method below:

Method 1: Change CSS of the HR element

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

Method 2 : Using HR attributes

<hr width="70%" size="20" color="red">

Method 3 : With noshade attribute

 <hr width="70%" size="20" noshade>

Some browsers use the color attribute and some use the background-color attribute. So use both color and background-color property when assigning a color to the <hr> tag.

  • border-color : works in Chrome and Safari.
  • background-color : works in Firefox and Opera.
  • color : works in IE7+

Using both color and background-color

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

Hope you like the article. Learn More about HR from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr


💾 Recommended Articles