CSS equivalent of noshade attribute

Is there a way of removing the groove look of an HR through CSS? I want to avoid using the noshade attribute. If I do use noshade, it causes other side-effects (background image is not tiled/rendered properly, background colour incorrect)

Styling <hr>s can actually be quite tricky. Take a look at these pages:


Unfortunately all the things that are suggested are things I’ve already tried, e.g.



border:0px solid #fff;

Any other ideas, anyone?

have you tried a div with a top border?

<div style=“height:1px; width:200px; border-top:1px solid black;”>

You could change the padding, width, colors etc to suit your page. This can also be added to the bottom of a paragraph, h1 tag etc if you want to underline something.

style=“border-bottom: 1px dashed black; padding-bottom:0px; color:#c0c0c0;”>Heading with dashed underline</h1>

I’ve used stuff like this a few times and have dropped using the hr tag completely :slight_smile:

Won’t work for two reasons:

a) Needs to work in Netscape 4. Div does not stretch all the way across. If I do apply 100%, it does not do 100% of container, but instead whole page … oops

b) I am more interested in the background image than the border, so it’s not a simple fix

Thansk for trying to help. I’ll be honest though, I’ve given up on this one now!