Horizontal Rules

Horizontal rules can act as dividers of a page - they are useful for breaking long paragraphs and huge chunks of text.

The horizontal rule tag is defined with <hr> :

---

This usually displays as a default grey and ugly line (but I’ve formatted the horizontal rule in this layout’s CSS). Horizontal rules by default fill up the container it is in but you can customize the horizontal rule with CSS and alter its width and height as well.

The CSS

For a really simple horizontal bar, you could use the following:

hr {
width: 200px;
height: 3px;
border: 1px solid #959595;
background-color: #fefccc;
margin:0 auto;
}

This will obviously change all your <hr> tags to look like a solid bar like so:

---

If you want to use multiple different horizontal rules at once, don’t fret. You can also use classes to define your dividers; ie:

<hr class="1">

This means you would also have a class 1 defined in your stylesheet so the horizontal rule can be differentiated from the other dividers.

Custom image rules

You can also use your own custom image and incorporate this into the <hr> tag. Simply get your image:

and find out its height and width correctly. In this case it is 230×5. We are now going to use this image as the background of the horizontal rule:

hr {
width: 230px;
height: 5;
border: none;
background: url(divimage.png) no-repeat;
margin:0 auto;
}

Test this out and it should work. You can use any sort of image for this CSS - have fun!!

See also...

• CSS: A Beginner’s Guide
• Tags, Identifiers and Selectors

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website