<p>Is there a nicer way of styling a <code>&lt;hr /&gt;</code> tag using CSS, that is cross-browser consistent and doesn't involve wrapping a <code>div</code> around it? I'm struggling to find one.</p>

<p>The best way I have found, is as follows:</p>

<p><strong>CSS</strong></p>

<pre><code>.hr {  
    height:20px;  
    background: #fff url(nice-image.gif) no-repeat scroll center;  
}  
hr {  
    display:none;  
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="hr"&gt;&lt;hr /&gt;&lt;/div&gt;
</code></pre>

If you set display to
```
block
```
it should behave more like a
```
<div>
```
.
Your answer you should remove hr altogether and just use the
```
div
```