Question

Is it possible to achieve cross browser (ie6+) semi-transparent borders with a solid background on div?

I have only found instances where:

• Borders are semi-transparent, but so is background.
• Body is semi-transparent, but borders are not.

Can anyone point me in the right direction, or an alternative solution?

Answer 1

This depends on which browsers you want/have to support, but you can use the CSS3-rgba declaration to define colors (standard rgb with additional a – which is the alpha/transparency channel). Also, depending on the colors of the background and border, you might need to add the background-clip property.

rgba(255,255,255,.5);
background-clip:padding-box;

would give you an 50% opaque white. This works on every attribute you can specify a color on.

It’s pretty good supported with the (how surprising) exception of IE<=8.

Here is an example for you: transparent border with solid bg.

For the sake of completeness: The necessary background-clip has the same browsersupport, but here is a browser support table

EDIT:

For support for IE6+ you should take a look at CSS3Pie. It emulates CSS3 Properties like rounded corners or other color spaces via VML.