Firefox hr opacity display different

Question

<hr style="opacity:0.4" />

I have problem with firefox hr opacity, it works fine on all other browser expect firefox

anyone know how to fix this?

Answer 1

It works as it should but I think you are talking about the 3d kinda default hr rendering of Firefox for hr, inorder to make the style consistent throughout browsers, reset the border, and apply the border again

hr {
   border: 0;
   border-top: 1px solid #f00;
   opacity: .1;
}

Demo

You can also use rgba() if you do not want to use opacity like

border-top: 1px solid rgba(255,0,0,.1); //Equivalent to opacity: .1; for red color

---

On the other hand, if you want, you can also declare an attribute called noshade="noshade"

<hr style="opacity:0.4" noshade="noshade" />

Demo

Answer 2

Lets try this:

opacity:0.5 /*All modern browser support*/
-webkit-opacity: 0.5; /*For webkit browser*/
-moz-opacity: 0.5; /*For Firefox Browser*/
filter:alpha(opacity=50);/*For IE8 and lower*/