CSS3 Transparent Border Tutorial
Alternatively you can use background-clip to achieve transparent borders. I prefer the 2 ways I did it. FYI, in the demo #border is only position absolute for demonstration purposes so it positions over the text so you can see it's action. If you don't want it AP'd just use position relative instead.
Method 1
The CSS
#border, #border:after {
position:absolute;
top:50px;
left:100px;
height:300px;
width:500px;
background:#fff;
}
#border:after {
content:'';
top:-20px;
left:-20px;
z-index:-1;
background:none;
border:20px solid #000;
opacity:.4;
border-radius:10px;
}
The HTML
<div id="border"></div>
Method 2
The CSS
#border {
position:absolute;
top:50px;
left:100px;
height:300px;
width:500px;
border-radius:10px;
box-shadow:0 0 0 20px rgba(0,0,0,0.4);
background:#fff;
}
The HTML
<div id="border"></div>
