CSS样式：表边缘的曲率（仅限顶部）

Question

我正在尝试将表格的左上角和右上角设为圆形，但应用以下代码也会使左下角和右下角呈圆形。知道怎么解决吗？

/* sets the curvature of the box */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

Answer 1

仅指定左上角和右上角：

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

border-radius.com是一种非常有用的快速工具，可以通过这种方式创建边框半径。

Answer 2

习惯了这个

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;

Answer 3

您可以使用此属性指定边框的每个角。它如下：

border-radius: [top-left] [top-right] [bottom-left] [bottom-right]

border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-o-border-radius: 10px 10px 0px 0px;

Answer 4

使用以下代码，它将起作用

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;