html - 境界線-テーブルの隅の半径が機能しない

Question

ここに、エッジを丸くするためにCSSスタイルを適用したメールテンプレートがあります。

左上、右上、左下、右下の外側の角を丸くしたい。すべての内部テーブルエッジ/コーナーは正方形である必要があります。

ただし、内部エッジも丸みを帯びていることがわかります。

ヘッダ：

フッター：

CSSを変更して、外側のエッジ/コーナーのみを丸めるにはどうすればよいですか？

table {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child th:last-child{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
/* Bottom Left */
table tr:last-child td:first-child{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
/* Bottom Right */
table tr:last-child td:last-child{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

Answer 1

border-radiusto要素を適用している場合td、DOM組織に基づいて丸みを帯びた境界線を表示するには、table要素にborder-radiusを適用する必要があります。

Answer 2

速記を使用するので、

ヘッダー（#templateHeader）の場合、

border-radius: 5px 5px 0 0; /*top-left top-right bottom-right bottom-left*/

フッター（#templateFooter）の場合、

border-radius: 0 0 5px 5px;

Answer 3

なし。border-radiusプロパティは、InternetExplorerではサポートされていません。