The HTML <hr> color Attribute is used to specify the color of a Horizontal rule. This attribute accepts color values in various formats, including color names, hexadecimal codes, or RGB values.
The ‘color’ attribute enables you to personalize the visual presentation of the horizontal rule, introducing a unique color tone to delineate different content sections.
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: The implementation of color attribute with <hr> tag
<!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:
<!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 >
|
Output:
Supported Browsers
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 12.1
- Safari 1