Stitched Borders with Psuedo Selectors

by Ben Gillbanks

HTML

<div class="stitched">
<p>This is some content that will appear in the box and wrap where required.</p>
<p>This is some content that will appear in the box and wrap where required.</p>
</div>

CSS

/**
 * Textured stitched CSS3 box - with a kitten
 */

.stitched {
	display:block;
	position:relative;
	width:200px;
	height:200px;
	margin:20px;
	background:url(http://placekitten.com/210/210/);
	border-radius:10px;
	padding:5px;
	box-shadow:2px 2px 10px rgba(10,10,10,0.2);
	color:#fff;
}

.stitched p {
	line-height:1.3;
	padding:5px 20px;
	margin:0 0 10px 0;
	font-size:15px;
}

.stitched:before {
	display:block;
	content:" ";
	position:absolute;
	width:196px;
	height:196px;
	border:2px dashed #fff;
	border-radius:7px;
	opacity:0.9;
}