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 :)

Edited by Joshua Kidd: n/a

6 Years
Discussion Span
Last Post by Joshua Kidd

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

Edited by lps: n/a


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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.