CSS 表格行边框半径

CSS 表格行边框半径是指在表格中设置表格行边框的圆角半径，使其看起来更加美观而不那么生硬。

属性值

CSS 表格行边框半径有两个属性值：

• border-top-left-radius：左上圆角半径
• border-top-right-radius：右上圆角半径

语法

table {
  border-collapse: collapse;
}

tr {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

th, td {
  border: 1px solid black;
  padding: 10px;
}

在上面的示例中，我们为 tr 元素设置了 border-top-left-radius 和 border-top-right-radius 属性值为 10px。这使得表格的上边缘呈圆角形状。

同时，需要注意的是，border-collapse 属性必须要设置为 collapse，否则圆角效果无法生效。

实例演示

看下面这个实例，很明显表格的上边缘呈现了圆角效果：

兼容性

CSS 表格行边框半径在各大主流浏览器中都得到了很好的支持，包括：

• IE 9
• Firefox
• Safari
• Chrome
• Opera

总结

CSS 表格行边框半径可以让表格在外观上更加美观，如果你想让你的表格看起来更加好看，那就试试这个属性吧。