Stanford Online Accessibility Program

Styling the <hr> element

The <hr> element (Horizontal rule) is used to seperate specific sections of content within one web page. By using the horizontal rule in your page, Adaptive Technolgy tools can also interpret this division, and as such it is recommended over the use of a graphic.

Un-styled however, the horizontal rule can be quite bland. Fortunately, it is realtively easy to add styling to your horizontal rule using CSS:

hr {
height: .1em;
color: #fff;
background-color: transparent;
border-top: 1px dashed #900;
border-bottom: 1px dashed #900;
width:80%;
}

Unless indicated otherwise, this work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.