HTML <hr> color Attribute

Last Updated : 12 Jul, 2025

The HTML <hr> color attribute was traditionally used to set the color of horizontal lines for visual separation in content. Although this attribute is deprecated in HTML5, similar and more flexible effects can now be achieved using CSS. By styling the <hr> element with properties likeborder,background-color and even using opacity (e.g., opacity: 50% .You can control both the color and transparency to match modern design needs.

Note: It is not supported by HTML5.

Syntax:

<Hr color= "color_name | hex_number | rgb_number">

Attribute Values:

Attribute Values	Description
color_name	It sets the Text color by using the color name. For example, “red”.
hex_number	It sets the text color by using the color hex code. For example, “#0000ff”.
rgb_number	It sets the text color by using the RGB code. For example: “RGB(0, 153, 0)”.

Example: In this example demonstrates the deprecated <hr> color attribute to set colors for horizontal lines. The lines are styled with attributes like color, size, and width, although modern styling should use CSS instead.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML hr color Attribute
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h2> 
      Hr color attribute
      </h2>
    <hr width="500px;" color="red" size="10">
    <p>Computer science portal</p>
    <hr width="70%" size="20" color="blue" noshade>
</body>
</html>

Output:

Screenshot-2023-12-19-153741 Example 2: In this example CSS to style <hr> elements with a custom color and width, aligning them centrally. It showcases modern methods for styling horizontal lines without using the deprecated <hr> color attribute.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            color: #424242;
            margin: 0;
            padding: 20px;
        }
        h2 {
            margin-bottom: 20px;
        }
        hr {
            border: 2px solid #e74c3c;
            width: 50%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1 style="color: #4CAF50;">
        GeeksforGeeks
    </h1>
    <h2>HR Color Attribute Example</h2>
    <hr>
    <p style="color: #555;">
        Your go-to computer science
        portal for knowledge and insights
    </p>
    <hr>
</body>
</html>