How to change the color of hr tag using CSS

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

To change the color of the HR tag in our HTML using CSS we have to use the CSS background-color property.

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

HTML < hr > Tag

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

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

Method 1: Change the 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

Related Topics:

Detect Dark Mode Using JavaScript And CSS

JavaScript: Change Background Color Of A Webpage

Change Text Color Using JavaScript With Example