表格角落的邊界半徑不工作

Question

我有一個電子郵件模板here，它具有應用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

使用速記，所以，

對於報頭（#templateHeader）

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

對於頁腳（#templateFooter）

border-radius: 0 0 5px 5px; 

Answer 2

沒什麼。 Internet Explorer不支持border-radius屬性。

Answer 3

您正在將border-radius應用於td元素，爲了根據您的DOM組織查看圓角邊框，必須將border-radius應用於table元素。