CSS表格背景已四舍五入,但边框是平方的

Question

我正在尝试创建一个在两侧都有圆形顶部边框的表格,但是表格边框的其余部分都是平方的.

当我应用这个CSS时,边框保持平方,但background-color 确实会四舍五入,这会产生奇怪的外观:

table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}

结果是这样的:

如何围绕左上/右上标题单元格中的边框,以便红色边框跟随背景？

请参阅JSFiddle以获取一个工作示例.

Answer 1

这是因为边界崩溃了:

CSS

table {
    border-collapse: collapse;
}

看看快速修复.