先看CSS款式：

.border{ background:#ffecf9; border:1px solid #ffd3ec; width:500px; position:relative; }

.lt{ background:url(../images/border_lt.gif) no-repeat; left:0; top:0; position:absolute; width:7px; height:7px;}
.rt{ background:url(../images/border_rt.gif) no-repeat; right:0;  top:0; position:absolute; width:7px; height:7px;}
.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
.rb{ background:url(../images/border_rb.gif) no-repeat; right:0; bottom:0; position:absolute; width:7px; height:7px;}

.content{}

代码：

<div class="border">
            <div class="lt-1"></div>
            <div class="rt-1"></div>
            <div class="lb-1"></div>
            <div class="rb-1"></div>

            <div class="content">This is content.</div>

</div>

款式中的border_lt.gif等4个图片就是div的4个圆角图片，需求本人完整的切出来，大小视情况而定
位置通过left、top、right、bottom来绝对控制

说明：

1、绝对定位的border层，宽度和高度至少定义一个，如果不定义的话，火狐是可以正常显示，但是IE会有很多问题

2、.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
这里位置的定义，IE下可能存在些许差别，可针对IE特别设置，示例如下：

.lb{ background:url(../images/border_lb.gif) no-repeat; left:-1px!important; left:-5px; bottom:-1px!important; bottom:-5px; }

具体视情况而定

本文链接http://www.cxybl.com/html/wyzz/CSS/20120610/29269.html