Css 如何在没有尖角的情况下在一个圆边上画圆边？

试图让我的桌子看起来漂亮，但我无法摆脱那些尖角

这是HTML

<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
    <tr style="background-color: #bb1133;">
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</tbody>
</table>

---

您可以为左角和右角添加一个类

CSS

HTML

aaa
bbb
ccc

---

这是边界像素与角点像素的问题。在这种情况下，将

边框增加到
2px
可以解决此问题：


。费用表粉红色{
宽度：100%；
背景色：#f9ecee；
边框：2px实心#bb1133；
边界塌陷：分离；
边界间距：0；
边界半径：6px；
-moz边界半径：6px；
-webkit边界半径：6px；
字体大小：正常；
}

aaa
bbb
ccc
aaa
bbb
ccc
这就是你看到的红色尖头

style="background-color: #bb1133; 

公认的答案并不能完全解决问题，因为如果您真的需要将边界设置为1px（如本例中所示），该怎么办。既然你可以这样做，为什么还要增加边界

table { border-collapse: separate; }
tr:first-child th:first-child { border-top-left-radius: 5px; }
tr:first-child th:last-child { border-top-right-radius: 5px; }

这解决了边界半径问题，而无需更改边界本身（需要1像素）。使第四个角的边界半径为5px，以不留间隙。我的答案是正确的。
我相信如果将边界半径更改为外部边界半径的50%。。。。这将得到解决。。。在这个例子中，3px…我第一次尝试在
th
内圆角，但这只是造成了一个缺口，但你的解决方案实际上起了作用-我只需要在周围的边界为2px的情况下生活：-）@torbenrudgaard很乐意帮助buddy。这都是数学问题，“隐藏”角边需要更厚的边界。
<th class="thleft">aaa</th>
<th>bbb</th>
<th class="thright">ccc</th>

style="background-color: #bb1133; 

table { border-collapse: separate; }
tr:first-child th:first-child { border-top-left-radius: 5px; }
tr:first-child th:last-child { border-top-right-radius: 5px; }