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.

Attributes	description
align	specify alignment in a hr element
width	use to give a width to hr element
height	Use to give height to hr element
noshade	no shading effects to hr element
color	Use to set color to hr element

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