css - 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;