From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/border-radius/index.html | 217 ++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 files/ja/web/css/border-radius/index.html (limited to 'files/ja/web/css/border-radius') diff --git a/files/ja/web/css/border-radius/index.html b/files/ja/web/css/border-radius/index.html new file mode 100644 index 0000000000..f72ffbefe4 --- /dev/null +++ b/files/ja/web/css/border-radius/index.html @@ -0,0 +1,217 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-radius +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

border-radius は CSS の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの一括指定です。

+ +

半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。

+ +

border-radius プロパティは {{cssxref("border-collapse")}} が collapse の table 要素には適用されません。

+ +
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
+ +

構文

+ +
/* 最初の半径の構文は1つから4つの値が許可されています */
+/* 半径を全4角に設定 */
+border-radius: 10px;
+
+/* 左上と右下 | 右上と左下 */
+border-radius: 10px 5%;
+
+/* 左上 | 右上と左下 | 右下 */
+border-radius: 2px 4px 2px;
+
+/* 左上 | 右上 | 右下 | 左下 */
+border-radius: 1px 0 3px 4px;
+
+/* 2番目の半径の構文は1つから4つの値が許可されています */
+/* (最初の半径の値) / radius */
+border-radius: 10px / 20px;
+
+/* (最初の半径の値) / 左上と右下 | 右上と左下 */
+border-radius: 10px 5% / 20px 30px;
+
+/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* グローバル値 */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

border-radius プロパティは次のように指定することができます。

+ + + +

値

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
半径all-corner.png境界の四隅に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。1つの値の構文のみで使用されます。
左上と右下top-left-bottom-right.png要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つの値の構文のみで使用されます。
右上と左下top-right-bottom-left.png要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つ又は3つの値の構文のみで使用されます。
左上top-left.png要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
右上top-right.png要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
右下bottom-rigth.png要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
左下bottom-left.png要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
+ +
+
{{cssxref("<length>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
+
{{cssxref("<percentage>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
+
+ +

例:

+ +
border-radius: 1em/5em;
+
+/* ... is equivalent to: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... is equivalent to: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
  border: solid 10px;
+  /* 境界が「D」のように描画される */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

ライブサンプル

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf