Question

I would like to create an rectangular overlay where the border is semi-transparent and the inner area is not transparent.

If I tweak the opacity parameter of the outer div (that contains the border) – than all the internal elements become transparent as well, which is unwanted.

Please advice.

Answer 1

Try this instead of using opacity, if you are alright with using CSS3:

border: 2px solid rgba(255, 0, 0, 0.5);

That should give you solid red that is 50% transparent. Check out this intro to rgba if you want more info.

EDIT

If you aren’t using an actual border, note that rgba can be used in any place where CSS expects a color, like background-color.