Html CSS表格背景为圆形，但边框为正方形

我试图创建一个表，它的两边都有圆形的顶部边框，但是表的其余边框是正方形的

当我应用这个CSS时，边框仍然是正方形，但是背景颜色确实变圆了，这产生了一种奇怪的外观：

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}

结果是：

我如何“圆化”左上/右上标题单元格中的边框，使红色边框跟随背景

---

有关工作示例，请参见。

这是因为边框因以下原因而塌陷：

CSS

---

请看。

这是因为边界因以下原因而塌陷：

CSS

---

请看。

只需将边框属性指定给表标记，而不是将其指定给th标记和td标记，就可以解决此问题

---

只需将边框属性指定给表标记，而不是将它们指定给th标记和td标记，就可以很简单地解决这个问题

更改：

   table {
    border-collapse: collapse;
}

致：

更改：

   table {
    border-collapse: collapse;
}

致：

---

以这种方式使用代码：

表{border:collapse；} th{边框顶部：1px实心红色；宽度：70px} th，td{文本对齐：左；背景色：cccc} th.header1{边框顶部：1px纯红；边框左侧：1px纯红；边框顶部左侧半径：20px}

---

以这种方式使用代码：

表{border:collapse；} th{边框顶部：1px实心红色；宽度：70px} th，td{文本对齐：左；背景色：cccc} th.header1{边框顶部：1px纯红；边框左侧：1px纯红；边框顶部左侧半径：20px}

---

你用的是什么浏览器？在IE9中，你的小提琴很好用。像这样的吗？但这需要额外的元素抱歉应该说-它的Firefox从未费心检查IE9，但是的9/10工作正常。很有趣…你用的是什么浏览器？在IE9中，你的小提琴很好用。像这样的吗？但这需要额外的元素抱歉应该说-它的Firefox从未费心检查IE9，但是的9/10工作正常。非常有趣…非常快速修复；喜欢！虽然奇怪的是@Raymond Ramirez的解决方案仍然有塌陷的边界，但效果很好…：-/我收回最后一句话，@Raymond的建议实际上是每一个快速修复；喜欢！虽然奇怪的是@Raymond Ramirez的解决方案仍然有塌陷的边界，但效果很好…：-/我收回最后一句话，@Raymond的建议实际上是错误的-prone@EvilDr他使用边界：崩溃；border属性的值无效这是为border collapse属性的默认值separate设置的。我明白了。因此，该声明被删除，因为它实际上是一个错误！非常感谢much@EvilDr他使用边界：崩溃；border属性的值无效这是为border collapse属性的默认值separate设置的。我明白了。因此，该声明被删除，因为它实际上是一个错误！非常感谢

   table {
    border-collapse: collapse;
}

 table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}