Web Development optimize

Customize horizontal rules to add some flair

Ryan Boudreaux shares some styling tips that will help rescue your boring horizontal rules.
Your typical horizontal rule <hr/> is just a boring line shape that slides across the page, unassuming, thoroughly bland and insignificant, as shown in Figure A below. Horizontal rules are the emphatic break between sections of content, and it has been given a bad reputation, so it's time we spruce up the element just a bit. In this tutorial, I am going to show you how to add unique styles to your horizontal rules <hr />. I will be using Dreamweaver CS5 to edit my html and CSS3, but any text editor will do. A series of screen captures and a demo page will illustrate the steps to creating customized horizontal rules for your web pages.

Figure A

Simple CSS

There are endless options to styling our sore thumb <hr/> tag, and they include any manner of CSS and CSS3 colors, sizes, heights, widths, borders, shapes, and images that can be applied to create imaginative horizontal lines. Let's start out with some simple CSS -- adding in a color first. I will create a quick style class and call it hline_color, give it a nice copper patina color #CFF, and a little height of 2px. The html and CSS snippets of code are displayed below, along with the resulting display as shown in Figure B below.
<hr class="hline_color" />
hr.hline_color {
   background:#CFF;
   height:2px;
}

Figure B

Now, let's create a horizontal rule with border styling; the options include dashed, solid, inset, dotted, double, grove, and ridge. The first border example is the dashed styling, the HTML and CSS code snippet, and display are shown below.

<hr class="border" />
hr.border {
   height:8px;
   border: 2px dashed #000;
}

Figure C

Of course, you can add any color to the border you wish, so if we update the color to a shade of #999 where border: 2px dashed #999; then we get the following result as displayed in Figure D:

The double border line style snippet and display:

hr.double {
      height:8px;
      border: 4px double #999;
}

Figure E

The dotted border line style with a new height and color:

hr.dotted {
      height:4px;
      border: 1px dotted #606;
}

Figure F

CSS3 linear gradient

Let's add some panache and elegance to our tiny <hr /> using cross-browser support for background image gradients. The gradient starts with a background color of #63C, and then linear gradients are provided for webkit, moz, ms, and o, starting from the left at #C9F, going to the #63C in the middle, then gradient back to #C9F on the right side. The CSS3 snippet and resulting display are shown below.

hr.gradient_one {
    border: 0;
    height: 1px;
    background: #63C;
    background-image: -webkit-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -moz-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -ms-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -o-linear-gradient(left, #C9F, #63C, #C9F);
}

Figure G

CSS3 drop shadow

Add the shadow-box styling and you create a nice horizontal rule with shading inset and rgb color with a transparency set to 0.8, along with a border-radius of 5px along each of the four corners. The CSS3 code snippet and the resulting display are shown below.

hr.drop_shadow {
    height: 10px;
    border: 1;
    box-shadow: inset 0 9px 9px -3px rgba(141,179,134,0.8);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
}

Figure H

CSS3 flared edges

In this example, we will add a flared edge to the horizontal rule with two curved flares jutting out toward the top and bottom from each end. Inspiration for this and the next style comes from Chris Coyier and his CSS-Tricks website. The flare utilizes several border properties, a style of ridge, a color of #900, a width of 2px 0 0 0, and a radius of 45px. The before styling sets the display to block, content to "", height to 50px, and the same border styling properties. The code snippet and resulting display are shown below.

hr.flare {
    height: 50px;
    border-style: ridge;
    border-color: #900;
    border-width: 2px 0 0 0;
    border-radius: 45px;
}
hr.flare:before {
    display: block;
    content: "";
    height: 50px;
    margin-top: -51px;
    border-style: ridge;
    border-color: #900;
    border-width: 0 0 2px 0;
    border-radius: 45px;
}

Figure I

CSS3 double line with symbol

The double border with symbol employs the use of padding at 0, border set to none, border top medium double with #333 color, color set again to #333, and text align set to center. Along with an after styling with properties for content includes the § symbol, display set to inline-block, position is relative, top set to -0.7em, font size is 1.5em, padding set to 0 0.25em, and background set to white. The styling code snippet and resulting display is shown below.

hr.symbol {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.symbol:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

Figure J

There are so many more ways to style a horizontal rule, this just scratches the surface. Do you have any horizontal rule styles that add a unique elegance to your websites? Please share them with us!

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
jefmcclimans
jefmcclimans

Great stuff. How would I add a dotted line that I could change the size of the dots? Thank you in advance.

moorec
moorec

These are amazing! The next time that I introduce HR in my HTML course, I can do it with a NEW ATTITUDE.

CompuMom
CompuMom

Very nice results, easy to implement!

gadutra
gadutra

Wow! Clear and simple technique. Show ball. Congratulations and thank you!

mhbowman
mhbowman

All were good, but the linear gradient, drop shadow, and double line with symbol really caught my eye. Thanks for the article, MB