Can you make the border transparent? - css

Question

In CSS is there a way to make the border transparent, but the box (inside) with the border the same?
Please see this link:
http://jsfiddle.net/xiiJaMiiE/LfWBn/14/
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
background:white;
z-index:1;
width:80%;
border:5px #0F0 solid;
}
I would like to know if I can make the green border 0.6 opacity and keep the white inside normal.
Is that possible or would I have to make 2 divs on top each other?
Thanks in advance!

Answer 1

You could just use: border: 5px rgba(0, 255, 0, 0.6) solid;
UPDATED EXAMPLE
#white_box {
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
top: 0%;
left: 5%;
right: 5%;
background: white;
z-index: 1;
width: 80%;
border: 5px rgba(0, 255, 0, 0.6) solid;
}
Alternatively, you could use outline too; both have different results.
outline: 10px solid rgba(0, 255, 0, 0.6);
EXAMPLE HERE

Answer 2

Here if you want fully transparent than, you can use border-color: transparent-
border: 5px solid transparent;
Try in fiddel
Unfortunately, in Explorer, border-color: transparent is rendered as black.
Or if you you only want partially-transparent border, than you can use rgb with alpha transparency-
border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
Try in fiddle

Answer 3

this answer to add some info only. (3 ways : box-shadow:outset x x x ; or box-shadow: inset x x x; , or background-clip )
if you want opacity on borders and see through background of parent container, and not mixe with the background of the element itself, you can draw the background-color with inset shadow. http://jsfiddle.net/Y78Ap/1/ (increased voluntary border-width and added a gradient to body to have it more 'telling')
html,body {
Background-color:rgba(255,165,0,0.5);
background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3));
}
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
box-shadow:inset 0 0 0 2000px white;
z-index:1;
width:80%;
border: 15px rgba(0, 255, 0, 0.6) solid;
}
You can as well just draw borders with box-shadow: 0 0 5px rgba(0,255,0,0.6); instead border
The easiest way suppose to be, nowdays, is background-clip : http://css-tricks.com/transparent-borders-with-background-clip/