CSS border-bottom-left-radius| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
border-bottom-left-radius CSS プロパティとは
トピック：要素境界線ボックスの 左下角の丸みのある形状を設定する ことができる このプロパティを使用すると、要素に丸みのある罫線を追加できる
プロパティ border-bottom-left-radius
実例 コード 1
サンプル コードを試す #webref1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#webref2 {
border: 2px solid red;
border-bottom-left-radius: 50px20px;
}- 情報：
border-bottom-left-radiusプロパティは、境界線が定義されていないか、値がnoneに設定されていても要素の背景を丸める
プロパティ 定義と使用法
| デフォルト値・初期値 : | 0 |
|---|---|
| 適用対象 : | すべての要素 |
| 継承 : | 不可 |
| 相対値の基準 : | 境界ボックスの対応する寸法を参照 |
| メディア : | visual |
CSS Version | CSS3 |
| 計算値 : | 絶対的な長さかパーセンテージ値の 2 値 |
| JavaScript 構文 | object.style.borderBottomLeftRadius="25px" |
| Animation type : | length または percentage, calc(); |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | border-bottom-left-radius: length |%, [length |%] |initial |inherit; |
- トピック：
- 2つの値を設定すると、最初の値は下の境界線用で、2つ目の値は左境界線用です。2番目の値を省略すると、最初の値からコピーする いずれかの長さがゼロの場合、コーナーは四角で丸められません。
プロパティ値
| 値 | 説明 |
|---|---|
length(長さ) | 長さ値px、pt、cm、em負の値が許可されていない |
percentage(パーセント) | 半径のサイズ（パーセンテージ）。2つの値の場合、要素のボックスの幅に対して第1の値（すなわち水平半径）のパーセンテージが計算され、要素のボックスの高さに関して第2の値のパーセンテージ（すなわち垂直半径）が計算される。負の値は許可されない |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするブラウザ対応・互換性
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-bottom-left-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
