可变宽度的圆角框

以前在看牛腩做圆角框时感觉好神奇，但一直没有实现，最近自己做了个网上鲜花销售系统，自叹后台界面做得太难看，所有决定做个可变宽度的圆角框，在谷歌浏览器修改了好久，后来才发现时margin-top 和margin-bottom 要设置为0。。。。下面这图是做好的了：

前台代码：

 

<div id="Menu"class="round2">
        <h3>
            常用操作</h3>
        <div  class="con">
            <p><a href="warekind.aspx" target="main">鲜花分类</a></p>
             <p><a href="#">站内信息管理</a></p>
             <p><a href="Goodsfangshi.aspx" target="main">付款及送货方式</a>
            
            <p><a href="CreateAdmin.aspx" target="main">用户管理</a></p>
             <p><a href="showware.aspx" target="main">鲜花添加</a></p>
             <p><a href="wareguanli.aspx" target="main">鲜花管理</a></p>
            <p><a href="../Default.aspx" target="main">访问主页</a></p>
            </div>
            <div class="footer">
                <p>
                    &nbsp;</p>
            </div>
        </div>

css代码：

 

/************做个圆角*************/
.round2
{
    background-image: url(../images/round2_left_top.gif);
    background-repeat: no-repeat;
    background-position: top left;
}
.round2 h3
{
    background-image: url(../images/round2_right_top.gif);
    background-repeat: no-repeat;
    background-position: top right;
    padding-top: 10px;
    padding-left: 38px;
    margin-bottom: 0px;
    margin-top: 0px;
}
.con
{
    background-image: url(../images/round2_right_middle.gif);
    background-position: top right;
    background-repeat: repeat-y;
    padding: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 40px;
    font-size: 14px;
}

.con a
{
    color: Black;
}
.footer
{
    background-image: url(../images/round2_left_bottom.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
}
.footer p
{
    background-image: url(../images/round2_right_bottom.gif);
    background-position: bottom right;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-bottom: 0px;
}
#Menu
{
    float: left;
}
#Menu .con
{
}