CODEWITHSUNDEEP
javascripthtmlcss
Rana
Rana

Reputation: 4611

transparent borders with css 3

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

Upvotes: 2

Views: 1626

Answers (6)

Ahsan
Ahsan

Reputation: 469

Yes you can achieve that very easily! Use this code :

border: 14px solid rgba(0,0,0,0.50);

Where 0.50 is the opacity!

Hope it helps!

Upvotes: 0

pizza247
pizza247

Reputation: 3897

<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)

Upvotes: 0

Rimantas
Rimantas

Reputation: 1491

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

Upvotes: 2

Michael Goldshteyn
Michael Goldshteyn

Reputation: 74390

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

Upvotes: 0

user268137
user268137

Reputation: 186

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);

Upvotes: 1

Robert
Robert

Reputation: 21388

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/

Upvotes: 3

Related Questions