一、CSS3实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现</title>
    <style>
        body{
            background: grey;
        }
        .box{
            margin: 30px auto;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 20px;/* CSS3实现 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

缺点：IE6下不兼容CSS3

二、三层嵌套实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三层嵌套实现</title>
    <style>
        .box{
            width: 200px;
            margin: 30px auto;
        }
        .boxHead{
            background: url('img2/boxH.png') repeat-x;
            height: 9px;
            overflow: hidden;
        }
        .HeadL{
            background: url('img2/boxHL.png') no-repeat;
        }
        .HeadR{
            background: url('img2/boxHR.png') no-repeat right 0;
            height: 9px;
        }
        
        .center{
            border-left: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
        }

        .footerHead{
            background: url('img2/boxF.png') repeat-x;
            height: 9px;
            overflow: hidden;
        }
        .footerL{
            background: url('img2/boxFL.png') no-repeat;
        }
        .footerR{
            background: url('img2/boxFR.png') no-repeat right 0;
            height: 9px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxHead">
            <div class="HeadL">
                <div class="HeadR"></div>
            </div>
        </div>

        <div class="center">
                内容内容内容内容内容<br/>
                内容内容内容内容内容<br/>
                内容内容内容内容内容<br/>
                内容内容内容内容内容<br/>
                内容内容内容内容内容<br/>
        </div>

        <div class="footerHead">
            <div class="footerL">
                <div class="footerR"></div>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

三层嵌套实现.png

缺点：边框圆角不透明。

三、三层嵌套加定位实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三层嵌套加定位实现</title>
    <style>
        body{
            background: grey;
        }
        .box{
            width: 82px;
            margin: 30px auto;
            background: url('img3/btn.gif') repeat-x;
        }
        .boxL{
            background: url('img3/btnL.gif') no-repeat;
            position: relative;
            left: -9px;
        }
        .boxR{
            background: url('img3/btnR.gif') no-repeat right 0;
            height: 30px;
            position: relative;
            right: -18px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxL">
            <div class="boxR"></div>
        </div>
    </div>
</body>
</html>

效果图：

圆角透明.png

四、三层嵌套加margin实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三层嵌套加margin实现</title>
    <style>
        body{
            background: grey;
        }
        .boxL{
            width: 100px;
            margin: 30px auto;
            background: url('img3/btnL.gif') no-repeat;
        }
        .boxR{
            background: url('img3/btnR.gif') no-repeat right 0;
        }
        .box{
            height: 30px;
            background: url('img3/btn.gif') repeat-x;
            margin: 0 9px;
        }
    </style>
</head>
<body>
    <div class="boxL">
        <div class="boxR">
            <div class="box"></div>
        </div>
    </div>
</body>
</html>