CODEWITHSUNDEEP
javascripthtmlcss
Vedant Terkar
Vedant Terkar

Reputation: 4682

Setting Opacity For Borders in IE(version<=8)

I am Having a Css Code :

#mydiv{
    position:absolute;
    top:50;
    left:50px;
    border: 8px solid rgba(160,160,160,0.8);
    padding:8px;
}

But the problem is This code doesn't work for IE, tested in IE 8.0.

I know That :

filter:alpha(opacity=80);

Is Property to set opacity in IE. But What I need is ' To Set opacity only for borders and not for entire div' . Any one know how to achieve this ? With or without JScript ?

Upvotes: 0

Views: 90

Answers (2)

Deepak Kamat
Deepak Kamat

Reputation: 1980

Try adding the background-clip property to make sure the border remains transparent even on a solid background. 

#mydiv {
    border: 1px solid rgba(160,160,160,0.8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

But the problem is that this property isn't supported in IE <=8. Old IE version doesn't have support for any beautiful stuff so my suggestion to you is to accept the truth that borders of your div won't have transparency in IE.

Thanks.

Upvotes: 0

Jordan
Jordan

Reputation: 32522

Border opacity works in IE9 and up. Your only option for IE 8 and below is to use some sort of semi-transparent PNG as a background, instead of a true border.

Upvotes: 1

Related Questions