This is a demo page for the Blog Post 3D box effect with CSS.


About Soren Kierkegaard

In appearance he was certainly odd. He was slight, spindly and with so pronounced a stoop that he was regarded as a hunch-back. The curvature of his spine, which he thought had been caused by a fall from a tree when he was a child, made him lean back as he walked, and gave him a dislocated, mechanical, crab-like gait, so that every movement appeared to be deliberate.




.box-content {
 	width: 180px;
 	background-color: #FEFF91;
 	margin: 0;
 	padding: 1px 10px; /* Top and bottom values cannot be zero */
 	border-left: 20px solid #D8D97C;
.box-top, .box-bottom {
	height: 20px;
	width: 220px;
	background: #FEFF91 url(box-top.gif) no-repeat;
	margin: 0;
	padding: 0;
.box-bottom {
	background-image: url(box-bottom.gif);
h1 {
	margin: -15px 0 0 0;


<div class="box-top">&nbsp;</div>
  <div class="box-content">
    <!-- Content here -->
<div class="box-bottom"> </div>