css 圆角效果，2例

1.你可以切成4个图，或者两个图。如下图

 

2.代码

html

<div class="box">
    <div class="outer">
        <div class="inner">
            <h2>headlines</h2>
            <p>Content ,fdascot<br />
            Content ,fdascot<br />
            Content ,fdascot<br />
            Content ,fdascot<br />
            </p>
        </div>
</div>
</div>
<div class="box2">
<div class="outer2">
 <div class="inner2">
       <h2>headlines</h2>
       <p>Content ,fdascot<br />
            Content ,fdascot<br />
            Content ,fdascot<br />
            Content ,fdascot<br />
            </p>
 </div>
</div>
</div>

css

 .box{background:url(images/bottom_left.gif) no-repeat left bottom;width:300px;}
    .outer{background:url(images/bottom_right.gif)  no-repeat right bottom;padding-bottom:5%;}
    .inner{background:url(images/top_left.gif) no-repeat left top;padding-left:20px;}
    .inner h2{background:url(images/top_right.gif) no-repeat right top;padding-top:5% ;}
    
    .box2{background:url(images/corner-left.gif) no-repeat left bottom;width:300px;}
    .outer2{background:url(images/corner-right.gif)  no-repeat right bottom;padding-bottom:5%;}
    .inner2{background:url(images/corner-left.gif) no-repeat left top;padding-left:20px;}
    .inner2 h2{background:url(images/corner-right.gif) no-repeat right top;padding-top:5%;}

3,最终效果