How To Style HR with CSS

The horizontal rule is typically used as a divider in content or sections in HTML pages. Today I’m going to show you how to style the horizontal rule, or <hr> element, with CSS.

Changing <hr> Width With CSS

First, let’s check out what an unstyled horizontal rule looks like:

Kinda boring. By default, The <hr> stretches across the screen. If we want to change this, we can edit the css width attribute:

hr {
width: 60%;
}

which changes the width of our <hr> element, like so:




Centering The Horizontal Rule With CSS
Now our <hr> is aligning left. If we want to fix this and make it horizontally centered, we’ll add margin-left and margin-right and set them to auto. This will center the horizontal rule like so:






1
2
3
4
5



hr {
width: 60%;
margin-left: auto;
margin-right: auto;
}








Now the horizontal rule is centered horizontally:




Alternatively, we could change the width of the <hr> by changing the % to a pixel size:






1
2
3
4
5



hr {
width: 300px;
margin-left: auto;
margin-right: auto;
}








and we’d get the same effect:




Changing <hr> Height With CSS
Now let’s change the thickness, or height, of our horizontal rule. We’ll add height: 100px; to our hr style:






1
2
3
4
5
6



hr {
width: 80%; 
margin-left: auto; 
margin-right: auto; 
height: 100px;
}








and we get:




That’s not right. What happened? We set the height to 100px and there’s no change. But if you look closely, you can see that an extra 100px of white space below our rule. That’s because the height is set to 100px, but we can’t see it.
By default the <hr> is using the border-top setting to display the line. So that’s all you see is the top border.
Changing The Color Of Our Horizontal Rule
If we want to see our new height, we’ll need to set the background-color and color of our <hr>:






1
2
3
4
5
6
7
8



hr {
width: 300px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:#f3f6db;
color:#f3f6db;
}








and now we can see that our horizontal rule is 100px in height and has a new background color:




I see that there’s still a gray border along the top of our newly colored <hr> element. Let’s get rid of that by adding border: 0 none; to remove all borders:






1
2
3
4
5
6
7
8
9



hr {
width: 300px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:#f3f6db;
color:#f3f6db;
border: 0 none;
}








and now that top border is gone:




That’s better. At this point, we know how to change the width and height, we know how to center the <hr> element, and we know how to change the color. Now let’s make our example look a little better.
First let’s pick a better color. My favorite place to find colors and color palettes for design is ColourLovers.com.



For this example, I’m going to pick a random color. I chose hot pink which is #FF0066. Let’s add it to our code. While we’re at it, I’m going to make a few changes to make it look a little better.






1
2
3
4
5
6
7
8
9



hr {
width: 80%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:#FF0066;
color:#FF0066;
border: 0 none;
}








Now let’s check out our rule:




Okay, that looks better and it has a little more flare than the default styling. If you have any questions so far, ask them in the comments at the bottom of this page.
Set The Margins Of Our <hr>
Now what if we wanted more, or less, white space around the horizontal rule. Sometimes you may want much more spacing, to really point out the dividers in your content. In those cases, we’ll increase the margin-top and margin-bottom, to give us more vertical spacing. Let’s try out 100px:






1
2
3
4
5
6
7
8
9
10
11



hr {
width: 80%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:#FF0066;
color:#FF0066;
border: 0 none;
margin-top: 100px;
margin-bottom:100px;
}








Now our horizontal rule should have much more spacing above and below it:


That’s great! Sometimes, however, you just want a small indicator of a break in your content. To create this effect we’ll just decrease the margin-top and margin-bottom. Let’s set this to 5px and see what it looks like:






1
2
3
4
5
6
7
8
9
10
11



hr {
width: 80%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:#FF0066;
color:#FF0066;
border: 0 none;
margin-top: 5px;
margin-bottom:5px;
}








Now our horizontal rule is much more snug to its surroundings:


In the example above, the white space is a little more than 5px, but this is because the other elements around it have their own margins. If you have any questions about setting margins, please ask them below.
Now before we move on, let’s clean up our CSS just a little by combining all of the individual margin properties into one margin property:






1
2
3
4
5
6
7
8



hr {
width: 80%;
height: 8px;
background-color:#FF0066;
color:#FF0066;
border: 0 none;
margin: 5px auto;
}








Using Background Images In Horizontal Rules
Now what if you want something a little more fancy? Maybe you want something with more detail or ornamentation, or just a divider that fits your site’s look and feel better. Why don’t we try to add a background image to our horizontal rule?
I’ve grabbed a simple repeating blue stars image from our free horizontal rules page to use as a background for our <hr> element. Let’s try it out by adding it to our CSS using the background  property and setting the height:






1
2
3
4
5



hr {
height: 20px;
background: url(hr-stars.png) no-repeat center;
border: none;
}








Now we see the blue stars showing up in the middle of our <hr>:


Great! That looks much better than the default <hr>. With this method you could use any image you want as your horizontal rule. We have a set of 36 free horizontal rules for you to use in your project. Just set the background: url() property to the path of your image, set the height to the same height as your image, and set border: none.
There can be some problems with much older browsers displaying a border regardless of what you do. In these cases you would detect which browsers can’t display the background image properly, and set CSS rules for those browsers to fallback to a different design. We won’t cover that here because most browsers work properly at the time of this writing.
Well, that’s all for this lesson. If you have any questions or comments, please leave them below. I’d love to hear your feedback!