Open In App

How to change the color of horizontal line (hr element) using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The color of the <hr> tag can be set by using the background-color property in CSS.

Example 1: In this example, the CSS within the <style> section customizes the <hr> element with a red background, a height of 4px, and no border.

html




<!DOCTYPE html> 
<html lang="en"
  
<head
    <meta charset="utf-8"
  
    <style
        hr { 
            height: 4px; 
            background-color: red; 
            border: none; 
        
    </style
</head
  
<body
    <h1>GeeksForGeeks</h1
  
    <h2
        How to Changing the co lor 
        of an hr element using CSS? 
    </h2
  
    <p>This is a paragraph</p
    <hr
      
    <p>This is another paragraph</p
</body
  
</html


Output:

Example 2: In this example, we have used CSS to change the color of a horizontal line (<hr> element) to a specific shade of blue (#3498db), with an optional border width of 2px.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        /* Style for the horizontal line */
        hr {
            border-color: #3498db;
              
            border-width: 2px;
              
        }
    </style>
    <title>Colored Horizontal Line</title>
</head>
  
<body>
    <p>content above the colored horizontal line.</p>
    <hr>
    <p>content below the colored horizontal line.</p>
</body>
  
</html>


Output:

Screenshot-2023-12-01-145504

Supported browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


Last Updated : 07 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads