How to Best Use Hairline Rules in Web Design


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, <hr>, 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.

Related Searches


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet


Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!