Picnic Website Code Tutorials

CSS3 Transparent Border Tutorial

12/18/2012

Method 1 Demo Method 2 Demo

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>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine