How to Best Use Hairline Rules in Web Design

by Peter Mitchell

The hairline rule usually applies to desktop publishing and graphic design. The generally accepted size for a hairline rule in graphic design is 0.25 points. Web design doesn't use hairline rules in the same way, though you can apply the idea to your website. In Web design, a hairline rule of 0.25 will be very hard to see. Instead, use hairline rules of 1 pixel.


No hairline tag exists in CSS or HTML code. However, you can create a hairline rule equivalent in either. In CSS, the border tag allows you to put a thin line around on along any number of sides of any specified element. For example, coding "border-bottom: 1px solid black;" puts a thin black border on the bottom of your chosen class or ID. This acts as a hairline rule, providing a thin strip in your chosen location on a Web page.


In most cases, CSS -- not HTML -- makes a better use of hairline rules in Web design as the line is a stylistic element. CSS should always indicate the style, and HTML the content. However, HTML does offer a horizontal rule tag,

, that can create a hairline rule. For example, the HTML code "hr color="black" size="1px" /> adds a horizontal black line 1px thick. This approach is limited to horizontal rules within your Web page content. It's not the best option for layout hairline rules.


One of the best uses of hairline rules in Web design is to separate content visually without using bold graphics or images. For example, with a multicolumn layout the columns sometimes need a simple separation to make them distinct from each other. A hairline rule of around 1 pixel, added using the CSS border tag, offers such a separator. In similar situations, such as adding breaks midcontent, hairline rules work well.


Pull-quotes show quotes or snippets from the main body of an article. These are often presented in a small block within the body of the article. Usually, pull-quotes have a larger font size and some formatting to distinguish them from the surrounding text. Hairline rules offer a good way to separate the pull-quotes from the content in a subtle way. Adding a hairline rule right around the pull-quote is an effective way to use the technique in general Web design.

Photo Credits

  • photo_camera Comstock/Stockbyte/Getty Images