扩展性比较好的圆角边框

/*圆角边框*/.box

        {

            width: 1000px;

            margin:0px auto;

        }

        .r1

        {

            height: 1px;

            overflow: hidden;

            margin: 0 5px;

            background: #d0d0d0;

        }

        .r2

        {

            height: 1px;

            overflow: hidden;

            margin: 0 3px;

            border-left: 2px solid #d0d0d0;

            border-right: 2px solid #d0d0d0;

        }

        .r3

        {

            height: 1px;

            overflow: hidden;

            margin: 0 2px;

            border-left: 1px solid #d0d0d0;

            border-right: 1px solid #d0d0d0;

        }

        .r4

        {

            height: 2px;

            margin: 0 1px;

            overflow: hidden;

            border-left: 1px solid #d0d0d0;

            border-right: 1px solid #d0d0d0;

        }

        .content

        {

            border-left: 1px solid #d0d0d0;

            border-right: 1px solid #d0d0d0;

            padding:0px; 

            height:28px;

            background-image:url(images/nav-background.gif);

        }

        .underbgcolor

        {

        background-color:#ececec;

        }

            /*圆角边框*/

 

 

 

 

 

 

<!--圆角-->

            <div class="box">

                <div class="top">

                    <div class="r1">

                    </div>

                    <div class="r2">

                    </div>

                    <div class="r3">

                    </div>

                    <div class="r4">

                    </div>

                </div>

                <div class="content">

                    <!--导航-->

                    <ul class="topnav">

                        <li><a href="#">首页</a></li>

                        <li><a href="#">Tutorials</a>

                            <ul class="subnav">

                                <li><a href="#">Sub Nav Link</a></li>

                                <li><a href="#">Sub Nav Link</a></li>

                            </ul>

                        </li>

                        <li><a href="#">Resources</a>

                            <ul class="subnav">

                                <li><a href="#">Sub Nav Link</a></li>

                                <li><a href="#">Sub Nav Link</a></li>

                            </ul>

                        </li>

                        <li><a href="#">Submit</a></li>

                        <li><a href="#">Advertise</a></li>

                        <li><a href="#">关于我们</a></li>

                        <li><a href="#">联系我们</a></li>

                    </ul>

                    <!--导航-->

                </div>

                <div class="top">

                    <div class="r4 underbgcolor">

                    </div>

                    <div class="r3 underbgcolor">

                    </div>

                    <div class="r2 underbgcolor">

                    </div>

                    <div class="r1">

                    </div>

                </div>

            </div>

            <!--圆角-->