Etched Border Effect

etched_border.css

.blue{background-color:#4A7496;}
.green{background-color:#49796B;}
.grey{background-color:#888}
.etched{
	width:50px;
	height:50px;
	border-top:1px solid rgba(0,0,0,0.2);	
	border-bottom:1px solid rgba(0,0,0,0.2);
	position:relative;
	box-shadow:1px 1px 2px -1px #000;
}
.etched:nth-child(n+2){
	border-top:0;
}
.etched:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1000;		
	border-radius:0;
	border-top:1px solid rgba(255,255,255,0.1);	
}
.etched:hover:after{
	background-color:rgba(255,255,255,0.1);
}

etched_border.html

<div class="etched blue"></div>
<div class="etched blue"></div>
<div class="etched grey"></div>
<div class="etched blue"></div>
<div class="etched green"></div>

etched_border.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}