[clarissa_milner]

Can I use <hr> </hr> in css, or do I still use it like an HTML tag?

[miguel879]

The HR (Horizontal Ruler) tag is a very helpful html element for dividing up sections of text in a page, without having to resort to one pixel high graphic. The problem is that left unstyled, your leaving it up to the browser to determine how it looks. Which can be indifferent at the best of times.

One way to control this is by using the available HTML attributes:

align: [ left, center and right ]
noshade: (solid line)
size: [ pixel value ] line height of the element
width: [ pixel or percentage value ] width of the element

example.

<hr noshade size="1" width="90%" align="center">

Sadly not all browsers will interpret these attributes the same way, so the best way to get a consistent look is to use CSS. hope i help

miguel

[clarissa_milner]

Hey Miguel,
That was very helpful, but I also need to know how to use it in CSS coding, do you know this too?

Crissy

[miguel879]

Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet.

On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide style sheets from the version 4 browsers and older, so my targeted browsers are IE5+, Opera 5+ and Mozilla/NN6.

Various CSS properties can be applied on <hr>:

All three browsers allow setting width and height of the <hr> element.
The border property can be used in IE and Mozilla. It does not work well in Opera (see examples below).
IE uses the color property for the <hr> element.
Opera and Mozilla use background-color for the <hr> element.
All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera.

Heres an example..

hr {
  border: 0;
  width: 80%;
color: #f00;
background-color: #f00;
height: 5px;
}

[Dormilich]

@Crissy: <hr> is an HTML tag and will always be. as such, it has noting to do with CSS (nor does the <hr> tag belong into CSS). what you can do in CSS is applying style rules to the hr element, though you have to stick to the CSS notation thereof.

another note, <hr> elements are standalone (empty) elements and do not have a closing tag.