Html 外部元件的圆角

我有带圆角的外置div。它的儿童没有圆角，但我希望外部div的圆角覆盖儿童的角落

我使用了第一个子和最后一个子选择器，它只适用于新设备（新版本的浏览器）

这是我的密码：

CSS:
.external
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid #68ACDD;
    margin: 0 0 1px 0;
    overflow: hidden;
}
.external:first-child
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.external:last-child
{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
table.address-table
{
    background: white;
    border-color: #68acdd;
    border-collapse: collapse;
}

HTML:
<div class="external">
    <table class="address-table">
        <tr class="">
            <td>some text</td>
        </tr>
    </table>
    <table class="address-table">
        <tr class="">
            <td>some other text</td>
        </tr>
    </table>
    <table class="address-table">
        <tr class="">
            <td>some other text</td>
        </tr>
    </table>
</div>

CSS:
.外部
{
边界半径：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
边框：1px实心#68ACDD；
边距：0 1px 0；
溢出：隐藏；
}
.外部：第一个孩子
{
边框左上半径：10px；
边框右上角半径：10px；
}
.外部：最后一个孩子
{
边框左下半径：10px；
边框右下半径：10px；
}
table.address-table
{
背景：白色；
边框颜色：#68acdd；
边界塌陷：塌陷；
}
HTML:
一些文本
其他一些文本
其他一些文本

而且

我的问题是旧设备（旧浏览器）：角落不存在（它只是一个白色）。 我怎样才能用老办法解决它？内部元素建立在运行时的基础上，因此我可以有一些逻辑并在需要的地方插入边框，但我正在寻找更优雅的方式（只使用html和css）

---

有什么建议吗？

我不认为用其他方式只使用html和css就可以做到这一点。或者你需要在拐角处静态地给出第一个和最后一个div。@ketan谢谢。我会用老办法。。。