transparent borders with css 3

Question

Is there a way to make the borders of an element semi-transparent? using purely css? like the modal window that facebook uses?

Answer 1

You can use rgba() such that background-color: rgba(255,0,0,0.5); is the same as background-color: rgb(255,0,0); opacity: 0.5;

For your border, do something like this border: 3px solid rgba(255,0,0,0.3);

http://jsfiddle.net/robert/b3e3v/

Answer 2

Use two divs ... one for the border the other for the inner area. Then set the background color of the outer div to have a transparency value:

background-color:rgba(0,0,0,0.5);

Answer 3

Well, you can do it in a hackish manner. Here is an article on how to make transparent/semi-transparent borders around a header section:

Transparent borders

Answer 4

RGBA is only half of an answer, the other half is background-clip. See there: http://css-tricks.com/transparent-borders-with-background-clip/

Answer 5

<div id="lightbox">
/* Set transparent background with PNG
   add padding to push inside box inward */

  <div id="lightbox-inside">
    /* Set white background in here */
  </div>

</div>

2 divs means proper compadibility. just remember to set your opacity(for ie and all others respectively)