CSS border-radius| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
border-radius CSS プロパティとは
トピック：要素の境界コーナーの丸みのある形状を設定することができる ボーダー 左上半径、ボーダー 右上半径、ボーダー 右下半径、およびボーダー 左下半径プロパティ
プロパティ border-radius
実例 コード 1
サンプル コードを試す#webref1 {
border: 2px solid red;
border-radius: 25px;
}
#webref2 {
border: 2px solid red;
border-radius: 50px20px;
}- 情報：
- 境界線が定義されていないか、又は 、値が
noneに設定されていても、border-radiusプロパティは要素の背景を丸める
実例 コード 2
サンプル コードを試すborder: solid 10px;
/* 4つの値 - border-radius：15px 50px 30px 5px;*/
/*最初の値は左上隅に適用され、2番目の値は右上隅に適用され、3番目の値は右下隅に適用され、4番目の値は左下隅に適用される */実例 コード 3
サンプル コードを試すborder: dotted;
border-width: 4px;
/*3つの値 - border-radius：15px 50px 30px;*/
/*最初の値は左上隅に適用され、2番目の値は右上と左下のコーナーに適用され、3番目の値は右下隅に適用される*/
実例 コード 4
サンプル コードを試すborder: none;
/*2つの値 - border-radius：15px 50px;*/
/*最初の値は左上と右下のコーナーに適用され、2番目の値は右上と左下のコーナーに適用される*/
実例 コード 5
サンプル コードを試す/*1つの値 - border-radius： 2em;*/
/*この値は四隅のすべてに適用され、等しく丸められる*/
border:groove 2em gold;実例 コード 6
サンプル コードを試すborder: ridge red;
border-radius: 9em/5em;
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして |
|---|---|
| 適用対象 : | すべての要素。table と inline-tableの要素border-collapsecollapse内部テーブル要素の動作は、現時点では未定義です。::first-letter にも適用される |
| 継承 : | 不可 |
| パーセンテージ : | 境界ボックスの対応する寸法を参照 |
| メディア : | visual |
CSS Version | CSS3 |
| 計算値 : | 以下の一括指定の各プロパティとして
|
| JavaScript 構文 | object.style.borderRadius="25px" |
| アニメーションの種類 : | 以下の一括指定の各プロパティとして
|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | border-radius: 1-4, length |%, /, 1-4, length |% |initial |inherit; |
- 情報：
- 1つ、2つ、3つ、4つの
<length>又は<percentage>の値。これは角の半径を1つ設定するために使用する ことができる。 - その後に任意で、
"/"(スラッシュ) と1つ、2つ、3つ、4つの<length>又は<percentage>の値。これは追加の半径を設定し、楕円形のコーナーにすることができる。
プロパティ値
| 値 | 説明 |
|---|---|
length | コーナーの形状を定義します。デフォルト値は0です。長さ単位 |
% | コーナーの形状を％で定義します。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
- トピック：
<length>円の半径の長さ、又は楕円の半長軸又は半短軸の長さをlengthの値を使用し記述する負の数は無効 。<percentage>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、パーセント値を使用して記述する水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するもので負の数は無効 。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| border-radius | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯4 | フルサポート◯12 | フルサポート◯4 | フルサポート◯9 | フルサポート◯10.5 | フルサポート◯5 |
| 楕円形の境界線 | フルサポート◯あり | フルサポート◯12 | フルサポート◯3.5 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
| 4つのコーナー 4つの値 | フルサポート◯4 | フルサポート◯12 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯5 |
| パーセンテージ | フルサポート◯あり | フルサポート◯12 | フルサポート◯4 | フルサポート◯あり | フルサポート◯11.5 | フルサポート◯5.1 |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| border-radius | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯あり | フルサポート◯ | フルサポート◯あり | 不明 |
| 楕円形の境界線 | 不明 | 不明 | フルサポート◯あり | フルサポート◯あり | サポートなし✖ | 不明 | 不明 |
| 4つのコーナー 4つの値 | 不明 | 不明 | フルサポート◯あり | フルサポート◯あり | サポートなし✖ | 不明 | 不明 |
| パーセンテージ | フルサポート◯あり | 不明 | フルサポート◯あり | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | 不明 |
