The HR or horizontal rule is one of the earliest tags or elements that make up the the World Wide Web’s main coding language of HTML — the Hypertext Markup Language, to be precise. The HR tag wasn’t part of the original group of HTML elements that was created and launched in 1991 by Tim Berners-Lee (HTML 1). It was, however, part of the second go-round of html that was in use from about 1995-1997 (HTML 2).

“HR” is one of the block elements of html and quite handy-dandy when it comes to breaking up different areas of a webpage and separating out different chunks of content.

When creating websites during the early days of the internet it used to be a standard practice to style and modify the HR element using its associated attributes. The attributes that used to be specific to the HR tag were align, noshade, size and width.

Gone are the days where those attributes can be coded directly into the html, though; that method of styling has been deprecated since HTML 4.01 and is no longer in use. Nowadays designers and developers need to use CSS code to add style to their HR tags.
 

Ok- cool, let’s get into some more creative ways to style the HTML HR tag, using CSS!

A few basic examples of styling the HR element

 
First off we’ll do some very basic stuff like centering our horizontal rule inside of the page (horizontally centered, not vertically centered). There is a quick and easy way to do that.
Simply slap some inline CSS code directly inside of the “hr” tag itself. This of course is NOT the best way to use CSS, as we explain in our article How to Use Inline CSS on Your Blog or Website.

However, it is the quickest way, so it might do in a pinch — if you use it sparingly.

• This is how that centered line would be coded:
<hr style=”width: 75%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

We had bring down the width of the horizontal rule/line a bit (“width: 75%”), because otherwise you wouldn’t be able to tell it was centered (it would span the full width of the page). And by using “margin-left: auto; margin-right: auto” we are telling browser to add an equal amount of margin to the left and right sides, around the outside of the HR element.

You might have noticed that adding the <hr> code to your page automatically creates some space directly above and below the line, when viewed in a browser. It adds what I estimate is the equivalent of a double space above and below the hr element. This is because <hr> is a block-level element in HTML, and block elements come built-in with extra vertical space around them.
 

Next we can add some color to the horizontal rule. How about a nice soft pink?

• This is how adding color would be coded:
<hr style=”background-color: pink; width: 75%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

 
A quick note about adding numerical values to html tags using CSS:
there are many different value types (or data types) that can be used. These include pixels, points, percentages, ems, rems… and so on. Mozilla goes into more detail on that subject in their article on CSS values and units.

Some slightly more advanced examples of CSS styling applied to the HR element

 
We can add an outside border around the horizontal rule. Let’s try a color that compliments pink.

• This is how adding a border would be coded:
<hr style=”background-color: pink; border: 1px solid gray; width: 75%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

Another interesting thing to do is to add height to the horizontal rule, to make it stand out more. We’ll add a height of 10px. For an extra touch let’s change the “border: 1px” to “border-bottom: 10px”. You can choose which borders to show — top, right, bottom or left. Here we only want to display the bottom border.

• This is how specifying which border to show and adding height to the hr itself would be coded:
<hr style=”background-color: pink; border-bottom: 10px solid gray; height: 10px; width: 75%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

 
• This is how only showing the right and left borders would be coded:
<hr style=”background-color: pink; border-left: 10px solid gray; border-right: 10px solid gray; height: 10px; width: 75%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

 
• This is how adding a WHOLE BUNCH of height to the hr tag while bringing the width way down would be coded:
<hr style=”background-color: pink; height: 400px; width: 2%; margin-left: auto; margin-right: auto;”>

This is how that code would appear in the browser:

(I’m not sure exactly where you would use that effect, but it’s kinda cool anyway… )
 

Switching the location of the CSS code

 
Now our html page is getting WAY too clogged up with inline CSS!

At this point (as we did in our previous article on Creative Ways to Style an HTML HR Tag) we really should switch our approach and add a CSS class or ID indicator inside of our HR tags. So let’s give the following more advanced HR elements some CSS IDs similar to “fancyHR” and go crazy with it and have a little fun!

First strip away the inline CSS that’s already there (as indicated in examples above), then add the CSS ID to the hr element as follows:
<hr id=”fancyHR”>

Now the html is so much cleaner. 🙂
 

Next we need to go into our external stylesheet file and add our advanced HR styles there. Finally, we’ll link to that external CSS file (stylesheet) by adding the following line of code up near the top of our html code, inside the “head” section:

<link rel=’stylesheet’ id=’add-id-here’ href=’external CSS file here’ type=’text/css’ media=’all’ />
 

Some advanced examples of the weird and wonderful things that can be done with CSS and the HR html tag

Note: in order for my examples to work, I had to use different CSS IDs for each example. CSS classes should be used if you intend to use the same style more than once.
 

Adding a double border to one of the sides:

Adding a single border to all four sides, adding a shadow using the “box-shadow” property:

Rounding the four edges of the HR and adding a hover state (the HR changes when touched or hovered over with a mouse):

 
Rounding the corners of the horizontal rule was achieved by using the “border-radius” CSS property, then specifying the corners should be rounded in by 10 pixels. You can also use percentages with this property.

Another cool thing about this particular CSS property is that you can specify different values for each of the four corners. Ex: border-bottom-left-radius: 20px; border-bottom-right-radius: 40px;

 
Adding a border to all sides of the HR and animating it:

This is the CSS to achieve that effect:
#fancyHR4 {
border: 7px solid #5c98d6;
width: 60%;
height: 30px;
}
#fancyHR4Move {
position: relative;
animation: moveHR 9s infinite;
animation-timing-function: ease-in-out;
}
@keyframes moveHR {
from {
left: 0px;
top: 0px;
}
to {
left: 95px;
top: -25px;
}
}

 
The animation above was achieved through the use of CSS keyframes. For a closer look into how keyframes work, take a look at our article How to Create CSS Animations: Keyframes.

 
Animating the HR, curving one corner, and making it slowly change color:

This is the CSS to achieve that effect:
#fancyHR5 {
width: 60%;
height: 30px;
position: relative;
margin-left: auto;
margin-right: auto;
animation: moveHR2 8s infinite;
animation-timing-function: ease-in-out;
}
@keyframes moveHR2 {
from {
left: 0px;
top: -35px;
border-top-right-radius: 70%;
background-color: beige;
}
to {
left: 4px;
top: 75px;
border-bottom-left-radius: 60%;
background-color: purple;
}
}

The styles and effects in this article were created (in part) using various CSS properties. There is SO much that can be done using properties, it’s incredible! We encourage you to experiment with your code and have fun with it.

For a list of the CSS properties, check out Mozilla’s CSS Properties Reference article.
 

Please share this article if you liked it, and thank you so much for visiting the Create With Code Dragon blog!

 
Hey there! — if you’re thinking about starting a blog or creating a new website and have chosen to build it on the WordPress platform, then you should consider a WordPress theme that is truly versatile and fun to work with: Divi from Elegant Themes.

I have built a few websites using Divi and had a great time working with it! With the Divi theme, page builder and platform you can make it easy on yourself and build websites in a very WYSIWYG, visual way. By that we mean you don’t need to know much code at all to create a blog or website using Divi, because of the incredible Divi Visual Editor. And there is also a way to add your own custom html and css code to your webpages, if you want to go the more advanced route. 🙂