Firefox's Wacky HR Bug


If you're looking at this page in FireFox, you should see rounded edges on the fat lime horizontal rule above.

The CSS is pretty stock.

hr {height:30px;background-color:#CC6699;border:3px solid #aa3366; }

The only slight peculiarity in the markup is the presence of the 'noshade='noshade'' attribute. In fact, 'noshade' by itself is enough to trigger the effect. The 'noshade' attribute is relatively commonly used, but I expect this bug is often ignored because the curves are only visible when the HR is given some extra height.

<hr noshade='noshade' />

In some ways it's understandable, in that all "presentation attributes" of the HR element were deprecated in HTML 4.01

Still, you've got to admit, that's a very creative way of responding to a deprecated element.

Let's just think of it as a feature :)