Style <hr> tag with CSS
In this post we will show you a few examples to style the <hr> html tag with css. The <hr> tag is used to add a horizontal line in a webpage, this line can be used to divide information or segments of your webpage.
<hr> tags by themselves are rather boring and ugly, that is why we can use some simple css techniques to add a bit of style to our lines. One thing you’ll want to add to each css rule, is setting the border property to 0, by doing this we are basically removing all borders of the current <hr> tag and starting with a blank canvas.
OK lets begin,
1. Our first example will show a single solid border of 1px.
hr {
border: 0;
border-top: 1px solid #333;
border-bottom: 1px solid #fff;
}2. Similar to the above, instead the border is dotted.
hr {
border: 0;
border-top: 2px dotted #333;
}3. Again similar to above, instead the border is dashed.
hr {
border: 0;
background-color: #fff;
border-top: 2px dashed #333;
}4. This example shows a dashed border with multiple colors.
hr {
border: 0;
border-bottom: 2px dashed red;
background: green;
}5. This line has a gradient line using linear-gradient as the background.
hr {
border : 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}6. Instead of a single solid line, this example uses a double line.
hr {
border: 0;
border-top: 3px double #333;
}7. Another example of an gradient line.
hr {
border: 0;
height: 1px;
background-image: linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
}8. An example with a shadow.
hr {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #333 inset;
}9. This one is a bit fancier, with rounded edges at the end.
hr {
border: 0;
height: 30px;
border-style: solid;
border-color: #333;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #333;
border-width: 0 0 1px 0;
border-radius: 20px;
}10. Another fancy line adding a symbol in the center.
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: #fff;
}11. Similar to above with different symbol.
hr {
border: 0;
border-top: 4px double #333;
text-align: center;
}
hr:after {
content: '\2665';
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #fff;
color: #8c8c8c;
font-size: 18px;
}12. Similar to above with different symbol.
hr {
border: 0;
border-top: 1px dashed #333;
text-align:center;
}
hr:after {
content: '\002702';
display: inline-block;
position: relative;
top: -13px;
padding: 0 3px;
background: #fff;
color: #333;
font-size: 18px;
}13. Another example with a box shadow effect.
hr {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}14. Example with a zig-zag effect.
hr {
border: none;
height: 10px;
background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;
background-color: #fff;
background-position: left bottom;
background-repeat: repeat-x;
background-size: 10px 10px;
}That’s all the examples we have at the moment, we will be adding more in the future. If you have a great design for the <hr> tag, please either contact us with the code or leave a comment below and we will add them to our list.
