Runnin' the rails
“...HRs aren't very good at doing their job”

Handling the HR

The table below shows a cross-section of browsers and their interpration of CSS applied to HRs. The great news is, if you're looking to separate content sections with an unobtrustive thin grey line your in luck! All browsers come to a reasonably amicable agreement on what the default <hr> should look like.


CSS Render
unstyled Default - unstyled
{color:red} color:red
{background:red} background:red
{background:red; color:red} background:red
{color:red; background:red; border-top:1px blue dashed} color:red; background:red; border-top:1px blue dashed;
{height:10px; color:red; background:red; border-top:5px blue dashed} background:red
{height:30px; border:0px none; border-top:5px blue dashed;background: #f3f3ff url(hr-3.gif) repeat-x center center;} background:#f3f3ff url(hr-3.gif) repeat-x center center; border:0px none;border-top:5px blue dashed;height:30px;

The first thing we need to acknowledge is HRs aren't very good at doing their job. Like a gracefully ageing monarch, their rule is now largely for ceremonial purposes, allowing more robust tags to do the behind-the-scenes work of governing the actual layout.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent id magna. Integer felis felis, condimentum interdum, cursus ac, dapibus at, lectus. Proin feugiat sollicitudin nulla. Aliquam erat volutpat. Curabitur tempor urna id elit. Vivamus facilisis ullamcorper nulla. Mauris et nibh in justo ullamcorper pretium. In gravida ligula sit amet nisl. Morbi mattis suscipit ante. Proin diam. Fusce auctor viverra mi.


Credits