Styling HR, BR Elements

Prerequisites

Browsers that are subjected to this test should support CSS1.

1. HR

In theory, HTML HR elements should also be fully styleable. In other words, anything you can apply to IMG should also work on HR elements! This is important so that custom decorative dividers can be used.

   .ha { width: 100%; height: 32px; } 

   .hb { width: 100%; height: 32px; border: 3px solid black; } 

   .hc { width: 100%; height: 32px; border-top: 3px dotted lime; } 

   .hd { width: 32px; height: 100px; background: red; } 

   .he { width: 80%; height: 100px; background: white url(/resources/meowmeow.gif) repeat-x top; } 

   .hf { background: purple; padding: 32px; } 

   .hg { display: none; } /* There should hide the HR */

Note. The UA stylesheet should use something along the lines of the following to support this element.

   HR { height: 1px; width: 100%; border-style: inset; border-width: thin; } 

2. BR

In theory, HTML BR elements should also be fully styleable. In other words, anything you can apply to EM should also work on BR elements!

   .ba { width: 32px; height: 32px; border: 10px solid lime; background: fuchsia; } 

Before
After

   .bb { display: none; } /* So should not break line! */

Before
After

Note. The UA stylesheet should use something along the lines of the following to support this element.

   BR:before { content: "\A" } 

Submit Results

Up to the Evil Tests Page.

Bugzilla: Bug 2590; Bug 1233 (related)

Last updated in January 1999.