最終更新日
border-bottom-left-radiusは、左下の角丸を指定するプロパティです。角の丸みは、水平方向と垂直方向の半径の組み合わせで表現します。半径の値は、数値かパーセント値で指定します。
値は2つまで記述でき、1つ目の値は水平方向、2つ目の値は垂直方向の半径となります。2つ目の値を省略した場合は、1つ目と同じ値になります。
4つの角丸をまとめて指定する場合は、border-radiusを使用します。
初期値 | 適用先 | 継承 |
---|---|---|
0 | すべての要素 | なし |
値 | 説明 | 表示例 |
---|---|---|
数値 | 半径を「px」や「em」で指定します。 |
border-bottom-left-radius: 10px;
border-bottom-left-radius: 10em;
|
パーセント値 | ボックスの幅と高さに対する割合で指定します。 |
border-bottom-left-radius: 30%;
border-bottom-left-radius: 50%;
|
border-bottom-left-radius: 10px; border-bottom-left-radius: 10em; border-bottom-left-radius: 10%; border-bottom-left-radius: 10px 10px; border-bottom-left-radius: 10em 10em; border-bottom-left-radius: 10% 10%;