Over the course of my years working with HTML as a web developer I have used the HR tag (<hr>) too many times to remember. I love this tag and use it often and have used it quite often on past website projects. It might not be everybody’s cup of tea and (truth be told) should be used sparingly in modern web design. There are far better ways of splitting up sections of content than to just stick a line in-between them. : )
That being said, I still sneak it in when I can and find it can be a useful aid in web page content layout and for adding a small fancy touch to a web page here and there.
 

A little background on the HR html element

The HR tag is one of the earliest tags or elements that make up the building blocks of HTML.
Note: the “hr” in this case stands for “horizontal rule”. It’s been around quite a while, and in the old days of HTML4 it used to be a little easier to style this html tag. Back in the day, web developers could code various style attributes right in there, within the html. For example it used to be possible to determine the width, size and alignment of an HR tag by using code such as <hr width=”200px”>. But alas, since the HTML 4.01 Specification all of that is now deprecated and is no longer in use.
 

 

Nowadays we need to use CSS to style our HR tags. Read on for some creative ways to do just that!

 
Let’s start with a very simple way of styling a horizontal rule and slap some inline CSS code inside of our <hr> tag. Using inline CSS is not the best way to incorporate styling into your website; the best way is to link to an external stylesheet or .css file. But for starters we’ll add some inline CSS to specify the width of the horizontal rule tag, like this:
<hr style="width:35%;">
It’s fine to use a percentage value or a value in pixels to indicate width or height.

And the result of that code (as seen in the browser output) appears to be a basic horizontal line, like this:

---

It is important to mention that the HR tag is a block-level element, and as such will come with a little bit of built-in space just above and below it. This tag also will span the entire width of the space that it’s in, unless you tell it to do otherwise. Here it is again without any width indicated in the code:

---

 
Now we’ll add a bit more inline styling to add some color to our line and pretty it up a bit:
<hr style="width:35%; color:blue;"> Here is the browser output:

---

Hmmm… what’s going on – why didn’t the line turn blue?
Because using the “color” attribute in CSS applies to the styling of fonts (text) and doesn’t change the appearance of other HTML elements. To do that we’ll need to use “background-color:blue;” instead. OK! Here’s how that looks after it’s fixed:

---

At this point it would be good idea to switch our approach and add a CSS class indicator to our HR tag, instead of continuing to pile on the inline CSS inside of the html on the page itself. So let’s give it a class of “fancyLine” and we’ll see what we can do with it!

First strip away the inline CSS that’s already there, then add the CSS class as follows:
<hr class="fancyLine">

Next we are free to go into our external stylesheet file and go crazy with the HR styles (woo hoo!) and we won’t be clogging up our HTML with extra code.
 

Some basic examples of CSS styling applied to the HR element:

---

---

---

---

---

In these examples I played around with the “border” attribute and experimented with different colors, thickness, and styles for the borders. Here is the CSS code I used to style each one of those HR’s in turn. Note: using “margin-left: auto” and “margin-right: auto” causes my lines to be perfectly centered.
Also, I had to use a slightly different CSS class name for each example in order to show the different styles and effects:

.fancyLine {
border: 3px dotted;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine2 {
border: 5px dashed pink;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine3 {
border: 7px double #5c98d6;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine4 {
border: 7px solid #5c98d6;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine5 {
border-bottom: 20px solid gray;
width: 60%;
margin-left: auto;
margin-right: auto;
}

 

Some more advanced examples of styling the HR element:

---

---

---

---

---

---

 

Here is the CSS code I used to style each one of those HR’s in turn (again- in order for my examples to work, I had to use a slightly different CSS class name for each example):

.fancyLine6 {
border-bottom: 20px solid steelblue;
border-radius: 15px;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine7 {
border: 18px groove pink;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine8 {
border: 13px inset #5c98d6;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine9 {
border-bottom: 23px ridge #5c98d6;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine10 {
border-bottom: 30px solid gray;
outline: 7px double black;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.fancyLine11 {
border-bottom: 30px solid gray;
outline: 6px dashed black;
width: 60%;
margin-left: auto;
margin-right: auto;
}

 

One last cool thing you can do with the HR tag (and most other HTML tags/elements, really) is to animate it:

(this page might need to be re-loaded into your browser to see the animations in action)

 

 

---

 

 

---

 

 

---

 
This time I used a CSS ID to reference the specific animation for each of the three HR tags, in the examples above.
Sample code: <hr id="animateFancyLine">

I used an ID because I was sure I wasn’t planning on re-using these animations elsewhere in my code (IDs are for unique instances and CLASSES are used when you’re planning on using the same styles elsewhere in your code).
 
The above animations were created using keyframes by placing “@keyframes” at the start of the CSS declaration. To get an idea of how to begin animating your CSS code using keyframes, check out this article.

 

---

 
Please share this article if you liked it, and thank you so much for visiting our blog! For more advanced ways to use CSS to add styling to the html HR element/hr tag, please take a look at our article More Creative Ways to Style the HTML HR Tag.
 
 

Tags: CSS tutorialhorizontal rule html elementHTML tutorialstyling html HR tag using CSS