Monthly Archives: July 2016

How to Style HR Tag to Create Separators

Using the HR Tag for separators in it’s default style is depressing on any design. For some beginner web designers you may not know we can style HR tag. You are however limited to what you can actually accomplish with CSS only. For this short tutorial I will be teaching you a few very simple examples of doing this as well as sharing the source that will include a few more examples you can check out using some CSS3 properties to create shadows and gradients. We will be styling a basic colored separator and a beveled separator using CSS styles only. Then we will create a separator using a repeating image. Lets gets started!


Assets used in this tutorial:

  • Separator Pattern (Image)

Step 1: Creating the Markup

Create a brand new index.html file and we will begin with some basic HTML markup containing a div wrapper and a few hr tags with classes relevant to their styling for this tutorial.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <title>Style HR Tag to Create Separators</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div id="wrapper">
        <p>Basic Color Style</p>
        <hr class="color" />
        <br /><br />
        <p>Bevel Style</p>
        <hr class="bevel" />
                <br /><br />
        <p>Image Style</p>
        <hr class="image" />
    </div>
</body>
</html>

Your index.html should now look like this when opened:

Style HR Tag to Create Separators | Step 1


Step 2: Create General Styles

Next we need to create a brand new styles.css in the same directory as index.html and we will create our general styles to the markup including the body, the div wrapper, and our paragraph text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    background: #e1e1e1;
    color: #252525;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}
#wrapper {
    width: 960px;
    margin: 40px auto;
}
p {
        color: #777;
        margin-bottom: 20px;
        text-align: center;
}

You will be left with this now:

Style HR Tag to Create Separators | Step 2


Step 3: Creating the Basic Color Separator

First we will remove the border from HR itself as well as add a margin-bottom to give it breathing room. Then we will create the color class give it a height of 1px (or however large you want it) and set the background to your choice of color, in this example I will be using #C9C9C9.

1
2
3
4
5
6
hr { margin-bottom: 50px; border: 0; } /* For all HR tag */
hr.color {
    height: 1px;
    background: #c9c9c9;
}

If we open our index.html now you can see we have now created a basic colored separator for the color class:

Style HR Tag to Create Separators | Step 3


Step 4: Creating the Bevel Separator

Now we will create one of those awesome looking bevel separators I’m sure you have seen on plenty of websites throughout the internet. It will consist of a border-top and a border-bottom each given their own color one light and one dark to create the bevel effect. I will be using #F4F4F4 for the border-top and #C9C9C9 for the border-bottom. These colors will vary based on your page background color, so you will need to play around with them to replicate the effect on another background color, but the method stays the same.

1
2
3
4
hr.bevel {
    border-top: 1px solid #c9c9c9;
    border-bottom: 1px solid #f4f4f4;
}

If we open our index.html now you can see we have now created an awesome bevel separator for the bevel class:

Style HR Tag to Create Separators | Step 4


Step 5: Creating the Image Separator

Now we will create a separator using a repeatable image, this method is a little more flexible as obviously you have to freedom to design it as you please. Download the sep-pattern.png included in assets at the top and place it in the same directory as the index.html and styles.css files. Then we will create our image class, use the image as background and repeat-x so it repeats horizontally. Then we will give it a height of 8px as the sep-pattern is 8px in height and we want to display then entire image.

1
2
3
4
hr.image {
    background: url(sep-pattern.png) repeat-x;
    height: 8px;
}

If we open our index.html now you can see we have now created our last separator and the image class is now in effect and repeating accross the available space:

Style HR Tag to Create Separators | Step 5


All Included Examples in Source Download

Style HR Tag to Create Separators | All Included Examples in Source Download