Styling a horizontal rule using CSS

If you have ever wanted to style a horizontal rule but had unexpected results, read on!

The more I learn about clean xhtml coding, the more I want to learn to style the elements within the xhtml instead of adding unnecessary page elements. I recently worked on a site where I wanted to stylize a <code><hr /></code>. I had a hard time finding one that was truly cross browser with consistent results. This requires a bit of extra code, but it’s a small price to pay for getting something with high compatibility.

XHTML:


<div class="hr"><hr /></div>

CSS:


div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

Tip was found at www.sovavsiti.cz/css/hr.html

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.

One thought on “Styling a horizontal rule using CSS

Comments are closed.