ADVERTISEMENT
ADVERTISEMENT

Changing the color of an HR element

Learn, how can we change the color of an <hr> tag / elements?
Submitted by Apurva Mathur, on May 31, 2022

What is <hr> tag?

The HTML <hr> element represents a Horizontal-rule and it is used for page breaks via line. It creates a horizontal line, which makes someone understand that there is an end of the page or a sentence break.

Example of default <hr> tag:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <p>This is a paragraph</p>
      <hr>
      <p>This is another paragraph</p>
   </body>
</html>

Output:

Example 1: Change the color of an HR tag

By default the color of this tag is black but we can customize this as per our wish.

Let us see how we can change the color of <hr> tag.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
   </head>
   <title>Change the Color of hr Tag using CSS</title>
   <style>
      hr{
      height: 5px;
      background-color: red;
      border: none;
      }
   </style>
   <body>
      <p>This is a paragraph</p>
      <hr>
      <p>This is another paragraph</p>
   </body>
</html>

Output:

Example 2: Change the color of an HR tag

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.