<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}

<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>

.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

-webkit-border-radius: 6px;
-moz-border-radius: 6px;

<div class="radius_top">
<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
</div>
<div class="item_content">内容区</div>
<div class="radius_bottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
</div>

 .r1,.r2,.r3,.r4{overflow:hidden;height:1px;background-color:#fff;zoom:1;}
 .r1{margin:0 5px;background-color:#c9c9c9;}
 .r2{margin:0 3px;border-left:2px solid #c9c9c9;border-right:2px solid #c9c9c9;}
 .r3{margin:0 2px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;}
 .r4{height:2px;margin:0 1px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;}
 .item_content{border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;background-color:#fff;zoom:1;}