最終更新日

border-top-left-radiusプロパティ

border-top-left-radiusは、左上の角丸を指定するプロパティです。角の丸みは、水平方向と垂直方向の半径の組み合わせで表現します。半径の値は、数値かパーセント値で指定します。

値は2つまで記述でき、1つ目の値は水平方向、2つ目の値は垂直方向の半径となります。2つ目の値を省略した場合は、1つ目と同じ値になります。

4つの角丸をまとめて指定する場合は、border-radiusを使用します。

CSS3での変更点
・border-top-left-radiusは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
0 すべての要素 なし
説明 表示例
数値 半径を「px」や「em」で指定します。
border-top-left-radius: 10px;
border-top-left-radius: 10em;
パーセント値 ボックスの幅と高さに対する割合で指定します。
border-top-left-radius: 30%;
border-top-left-radius: 50%;
サンプルコード
border-top-left-radius: 10px;
border-top-left-radius: 10em;
border-top-left-radius: 10%;
border-top-left-radius: 10px 10px;
border-top-left-radius: 10em 10em;
border-top-left-radius: 10% 10%;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME