CSS border-top-left-radius| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
border-top-left-radius CSS プロパティとは
トピック：要素境界線ボックスの「左上」コーナーに丸みのある形状を設定する、ことができる
プロパティ border-top-left-radius
実例 コード 1
サンプル コードを試す #webref1 {
border: 2px solid red;
border-top-left-radius: 25px;
}
#webref2 {
border: 2px solid red;
border-top-left-radius: 50px20px;
}- 情報：border-top-left-radius CSS プロパティは、要素の左上隅の丸め処理を設定する 丸めは、円又は 、楕円とする事が可能 値を 0 とした場合の丸めは行わず コーナーは正方形となる 画像や色である背景は、境界線で丸められていてもクリップされる クリッピングの正確な位置は、
background-clipプロパティの値によって 定義 されされる 。プロパティ 定義と使用法
| デフォルト値・初期値 : | 0 |
|---|---|
| 適用対象 : | すべての要素 |
| 継承 : | 不可 |
| 相対値の基準 : | 境界ボックスの対応する寸法を参照 |
| メディア : | visual |
CSS Version | CSS3 |
| 計算値 : | 絶対的な長さかパーセンテージ値の 2 値 |
| JavaScript 構文 | object.style.borderTopLeftRadius="25px" |
| Animation type : | length または percentage, calc(); |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | border-top-left-radius: length |%, [length |%] |initial |inherit; |
- 使用上の注意：
このプロパティの値が
border-radius、border-top-left-radiusCSSプロパティの後の要素に適用された簡略プロパティに設定されていない場合、このプロパティの値は、shorthandプロパティによって初期値にリセットされるプロパティ値
| 値 | 説明 |
|---|---|
length(長さ) | 長さ値px、pt、cm、em負の値が許可されていない |
percentage(パーセント) | 半径のサイズ（パーセンテージ）。2つの値の場合、要素のボックスの幅に対して第1の値（これは 水平半径）のパーセンテージが計算され、要素のボックスの高さに関して第2の値のパーセンテージ（これは 垂直半径）が計算される。負の値は許可されない |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
実例 コード 2
サンプル コードを試すborder-top-left-radius: 40px 40px;
/* 境界として円弧が使用される */
- 情報：境界として円弧が使用される
実例 コード 3
サンプル コードを試すborder-top-left-radius: 40px 20px;
/* ボーダーとして楕円の弧が使用される */
- 情報：ボーダーとして楕円の弧が使用される
実例 コード 4
サンプル コードを試すborder-top-left-radius: 40%;
/* ボックスが四角形：設定値はパーセント(%)を使用 円弧が境界線として使用される */
- 情報：ボックスが四角形：設定値はパーセント(%)を使用 円弧が境界線として使用される
実例 コード 5
サンプル コードを試すborder-top-left-radius: 40%;
/* ボックスが長方形：設定値はパーセント(%)を使用 楕円の弧が境界線として使用される */
- 情報：ボックスが長方形：設定値はパーセント(%)を使用 楕円の弧が境界線として使用される
実例 コード 6
サンプル コードを試すborder-top-left-radius: 75%;
border-style: red 5px double;
background-clip: content-box;
/* 境界線で背景色がクリップされる */
- 情報：境界線で背景色がクリップされる
サポートするブラウザ対応・互換性
| 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 |
