CSS Shadows - Custom graphical border on DIV with CSS


<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Flow Design Test</title>
<style type="text/css">
<!--
body {
	background:#f4f3f3;
}
.flowBox {
	background:#FFFFFF;
	margin:10px;
	float:left;
	padding:10px;
	width:250px;
	position:relative;
}

.shadow {
	-moz-box-shadow: 2px 3px 4px #ccc;
	-webkit-box-shadow: 2px 3px 4px #ccc;
	box-shadow: 2px 3px 4px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#cccccc');
}

.clear {
	clear:both;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script>

$(window).load(function(){

	$('#container').masonry({
		// options
		itemSelector : '.flowBox',
	});

});

</script>
</head>

<body>
<div id="container">
<div class="flowBox shadow">
	<h1>
		Header 0	</h1>
	dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 1	</h1>
	molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 2	</h1>
	nim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 3	</h1>
	bh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 4	</h1>
	m dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 5	</h1>
	us sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 6	</h1>
	im sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 7	</h1>
	retra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 8	</h1>
	sectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 9	</h1>
	g elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 10	</h1>
	gnissim sem, eget bibendum dui sodales vitae.
</div>
<div class="flowBox shadow">
	<h1>
		Header 11	</h1>
	Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
</div>
<div class="clear"></div>
</body>
</html>