CSS3 Border Opacity?

Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity.

Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); } The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration.

The solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

Div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); } The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

Yeah and then we're back to the problem he first had ^^ "I thought about using rgba for the border-color, but it works very poorly across modern browsers. " while my solutions works in pretty much all browsers – Breezer Oct 31 '10 at 6:16 1 Actually, rgba works excellently in modern browsers (unless you think IE6-8 are "modern"). – kingjeffrey Oct 31 '10 at 6:28 1 well they're suppose to be :P and when you got 50%+ using them you should see to it that it works for ie aswell imo at least for ie7+ – Breezer Oct 31 '10 at 6:36 4 And that is why there is the "fake opacity" fall back.My life as a web designer became a lot easier when I accepted that not every browser needs to render identically.

If they support border-radius, then they get rounded corners. If not, they don't. The content is still accessible, it still looks fine, it just looks better if they are using a capable browser.

I've never had one client complain about this in the past 1.5 years of operating this way on every project. – kingjeffrey Oct 31 '10 at 6:45 1 If you're trying to get the content behind your bordered content to shine though (and NOT the background color of the bordered element itself), you'll need to set background-clip:padding-box; too. – SooDesuNe Oct 31 '107 at 16:37.

As others have mentioned: CSS-3 says that you can use the rgba(...) syntax to specify a border color with an opacity (alpha) value. Here's a quick example if you'd like to check it. It works in Safari and Chrome (probably works in all webkit browsers).

It works in Firefox I doubt that it works at all in IE, but I suspect that there is some filter or behavior that will make it work. There's also this stackoverflow post, which suggests some other issues--namely, that the border renders on-top-of any background color (or background image) that you've specified; thus limiting the usefulness of border alpha in many cases.

Thanks. Yeah, I stopped worrying about I.E. Probably sounds bad, but its just a pathetic browser. I just direct I.E. Users to a mobile version.

Too bad I.E.Still holds over 50% of the market share. Not that this comment has anything to do with the question – mcbeav Oct 31 '10 at 6:27 2 The border issue can be cured with background-clip: padding-box; (and until that is supported, you can use the -webkit and -moz vendor extensions). – kingjeffrey Oct 31 '10 at 6:39 @kingjeffrey - that's good to know--thanks!.

– Lee Oct 31 '10 at 6:50 I've added this answer to the question you've linked to. – kingjeffrey Oct 31 '10 at 6:55.

Not as far as I know there isn't what I do normally in this kind of circumstances is create a block beneath with a bigger size((bordersize*2)+originalsize) and make it transparent using filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; here is an example #main{ width:400px; overflow:hidden; position:relative; } . Border{ width:100%; position:absolute; height:100%; background-color:#F00; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } . Content{ margin:15px;/*size of border*/ background-color:black; } testing.

Yeah that is what I ended up doing actually, it just sucks fudging with the positioning of the elements. – mcbeav Oct 31 '10 at 6:06 added an example so you could see clearer how I was thinking :) – Breezer Oct 31 '10 at 6:08 it can be done - but not with broad cross-browser support. However, chances are good that any browser that supports css opacity on background color would also support rgba(...) in border colors.

You can try it out here. – Lee Oct 31 '10 at 6:23 @Lee, IE supports the "filter" opacity, but not any form of rgba (until IE9). – kingjeffrey Oct 31 '10 at 6:41.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.