How can I get an hr to fade off into the page color on both ends?

Not an effect. Just the look of the <hr>

Thanks if someone can help :)

Recommended Answers

By controlling its width?

Jump to Post

By replacing it with an image?

Jump to Post

All 7 Replies

By controlling its width?

By replacing it with an image?

no, you can either use it in html code such as

<hr style="width:500px;"/>

or you can add class to the line and use CSS to control it.
Before I forget, you can center it by adding margin:auto

Since the request was for a fade - that would imply a gradient from the color of the hr element to the background color, which is why I suggested an image. Maybe a gradient would work. But I doubt it will work in MSIE.

Oh, maybe I misunderstand you meaning. How about if adding shadow to both side of the hr? It work for me, but the problem still in IE7/8 where I use filter to generate the shadow.

Nothing fancy or cool works properly in IE7/8. But apparently it does support gradients in CSS. Look for "CSS gradient background".
Let us know if it works.

WORKED!! Had to make a table with only certain sides gradient because I needed a horizontal hr as well but could not find one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.