How to change the color of horizontal line (hr element) using CSS ?
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:
Supported browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Last Updated :
07 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...