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.


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

CSS: {
height: 15px;
background: #fff url( no-repeat scroll center;
} hr {
display: none;

Tip was found at

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.