先看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