CSS Borders 関係のプロパティの文書を更新

- 2021/11/13 時点の英語版に同期

1 files changed, 193 insertions, 131 deletions

diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md
index cb351478fe..d5cfcf9458 100644
--- a/files/ja/web/css/border-radius/index.md
+++ b/files/ja/web/css/border-radius/index.md
@@ -3,213 +3,275 @@ title: border-radius
 slug: Web/CSS/border-radius
 tags:
   - CSS
+  - CSS 境界
   - CSS プロパティ
-  - CSS 背景と境界
-  - Reference
-  - border-radius
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.border-radius
 translation_of: Web/CSS/border-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>border-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。</p>
+**`border-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。
 
-<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-radius.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。切り取りが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。
 
-<p>このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+`border-radius` プロパティは {{cssxref("border-collapse")}} が `collapse` の table 要素には適用されません。
 
-<p>半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。</p>
+> **Note:** 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
 
-<p><code>border-radius</code> プロパティは {{cssxref("border-collapse")}} が <code>collapse</code> の table 要素には適用されません。</p>
+## 構成要素のプロパティ
 
-<div class="note"><strong>メモ:</strong> 他の一括指定プロパティと同様、個別のサブプロパティは <code>border-radius:0 0 inherit inherit</code> のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。</div>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- [`border-top-left-radius`](/ja/docs/Web/CSS/border-top-left-radius)
+- [`border-top-right-radius`](/ja/docs/Web/CSS/border-top-right-radius)
+- [`border-bottom-right-radius`](/ja/docs/Web/CSS/border-bottom-right-radius)
+- [`border-bottom-left-radius`](/ja/docs/Web/CSS/border-bottom-left-radius)
 
-<pre class="brush: css no-line-numbers"><strong>/* 最初の半径の構文は1つから4つの値が許可されています */</strong>
-/* 半径を全4角に設定 */
+## 構文
+
+```css
+/* 最初の半径の構文は 1 つから 4 つの値が許可されています */
+/* 半径を全 4 角に設定 */
 border-radius: 10px;
 
-/* <em>左上と右下</em> | <em>右上と左下</em> */
+/* 左上と右下 | 右上と左下 */
 border-radius: 10px 5%;
 
-/* <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
+/* 左上 | 右上と左下 | 右下 */
 border-radius: 2px 4px 2px;
 
-/* <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
+/* 左上 | 右上 | 右下 | 左下 */
 border-radius: 1px 0 3px 4px;
 
-<strong>/* 2番目の半径の構文は1つから4つの値が許可されています */</strong>
-/* (最初の半径の値) / <em>radius</em> */
+/* 2 番目の半径の構文は 1 つから 4 つの値が許可されています */
+/* (最初の半径の値) / 半径 */
 border-radius: 10px / 20px;
 
-/* (最初の半径の値) / <em>左上と右下</em> | <em>右上と左下</em> */
+/* (最初の半径の値) / 左上と右下 | 右上と左下 */
 border-radius: 10px 5% / 20px 30px;
 
-/* (最初の半径の値) / <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
+/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
 border-radius: 10px 5px 2em / 20px 25px 30%;
 
-/* (最初の半径の値) / <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
+/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
 border-radius: 10px 5% / 20px 25em 30px 35em;
 
 /* グローバル値 */
 border-radius: inherit;
 border-radius: initial;
+border-radius: revert;
 border-radius: unset;
-</pre>
+```
 
-<p><code>border-radius</code> プロパティは次のように指定することができます。</p>
+`border-radius` プロパティは次のように指定することができます。
 
-<ul>
- <li>1つ、2つ、3つ、4つの {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} の値。これは角の半径を1つ設定するために使用します。</li>
- <li>その後に任意で、 "/" と1つ、2つ、3つ、4つの <code>&lt;length&gt;</code> 又は <code>&lt;percentage&gt;</code> の値。これは追加の半径を設定し、楕円形の角にすることができます。</li>
-</ul>
+ - 1 ～ 4 つの {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の値。これは角の半径を 1 つ設定するために使用します。
+ - その後に任意で、 "/" と 1 ～ 4 つの `<length>` または `<percentage>` の値。これは追加の半径を設定し、楕円形の角にすることができます。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
 <table>
- <tbody>
-  <tr>
-   <td style="vertical-align: top;"><em>半径</em></td>
-   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
-   <td style="vertical-align: top;">境界の四隅に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。1つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>左上と右下</em></td>
-   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
-   <td style="vertical-align: top;">要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>右上と左下</em></td>
-   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
-   <td style="vertical-align: top;">要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つ又は3つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>左上</em></td>
-   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
-   <td style="vertical-align: top;">要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>右上</em></td>
-   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
-   <td style="vertical-align: top;">要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>右下</em></td>
-   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
-   <td style="vertical-align: top;">要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;"><em>左下</em></td>
-   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
-   <td style="vertical-align: top;">要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><em>半径</em></td>
+      <td><img alt="all-corner.png" src="all-corner.png" /></td>
+      <td>
+        境界の四隅に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 1 つの構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>左上と右下</em></td>
+      <td>
+        <img alt="top-left-bottom-right.png" src="top-left-bottom-right.png" />
+      </td>
+      <td>
+        要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 2 つの構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>右上と左下</em></td>
+      <td>
+        <img alt="top-right-bottom-left.png" src="top-right-bottom-left.png" />
+      </td>
+      <td>
+        要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 2 つまたは 3 つの構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>左上</em></td>
+      <td><img alt="top-left.png" src="top-left.png" /></td>
+      <td>
+        要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 3 つまたは 4 つの構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>右上</em></td>
+      <td><img alt="top-right.png" src="top-right.png" /></td>
+      <td>
+        要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 4 つの構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>右下</em></td>
+      <td><img alt="bottom-rigth.png" src="bottom-rigth.png" /></td>
+      <td>
+        要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。3 つまたは 4 つの値の構文でのみ使用されます。
+      </td>
+    </tr>
+    <tr>
+      <td><em>左下</em></td>
+      <td><img alt="bottom-left.png" src="bottom-left.png" /></td>
+      <td>
+        要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 4 つの構文でのみ使用されます。
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
- <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。</dd>
- <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
- <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
 
-<p>例:</p>
+例:
 
-<pre class="brush: css">border-radius: 1em/5em;
+```css
+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;
-</pre>
+```
 
-<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+```css
+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;
-</pre>
+```
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
 
-{{csssyntax}}
+{{CSSInfo}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 形式文法
 
-<pre style="display: inline-block; margin: 10px; border: solid 10px !important; border-radius: 10px 40px 40px 10px; width: 90%;">  border: solid 10px;
-  /* 境界が「D」のように描画される */
+{{csssyntax}}
+
+<h2 id="Examples">例</h2>
+
+```html hidden
+  <pre id="example-1">
+border: solid 10px;
+border-radius: 10px 40px 40px 10px;
+  </pre>
+  <pre id="example-2">
+border: groove 1em red;
+border-radius: 2em;
+  </pre>
+  <pre id="example-3">
+background: gold;
+border: ridge gold;
+border-radius: 13em/3em;
+  </pre>
+  <pre id="example-4">
+border: none;
+border-radius: 40px 10px;
+background: gold;
+  </pre>
+  <pre id="example-5">
+border: none;
+border-radius: 50%;
+background: burlywood;
+  </pre>
+  <pre id="example-6">
+border: dotted;
+border-width: 10px 4px;
+border-radius: 10px 40px;
+  </pre>
+  <pre id="example-7">
+border: dashed;
+border-width: 2px 4px;
+border-radius: 40px;
+  </pre>
+```
+
+```css hidden
+pre {
+  margin: 20px;
+  padding: 20px;
+  width: 80%;
+  height: 80px;
+}
+
+pre#example-1 {
+  border: solid 10px;
   border-radius: 10px 40px 40px 10px;
-</pre>
+}
 
-<pre style="display: inline-block; margin: 10px; border: groove 1em red  !important; border-radius: 2em; width: 90%;">  border: groove 1em red;
+pre#example-2 {
+  border: groove 1em red;
   border-radius: 2em;
-</pre>
+}
 
-<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold  !important; border-radius: 13em/3em; width: 90%;">  background: gold;
+pre#example-3 {
+  background: gold;
   border: ridge gold;
   border-radius: 13em/3em;
-</pre>
+}
 
-<pre style="display: inline-block; margin: 10px; background: gold; border: none  !important; border-radius: 40px 10px; width: 90%;">  border: none;
+pre#example-4 {
+  border: none;
   border-radius: 40px 10px;
-</pre>
+  background: gold;
+}
 
-<pre style="display: inline-block; margin: 10px; background: burlywood; border: none  !important; border-radius: 50%; width: 90%;">  border: none;
+pre#example-5 {
+  border: none;
   border-radius: 50%;
-</pre>
+  background: burlywood;
+}
 
-<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px  !important; border-radius: 10px 40px; width: 90%;">  border: dotted;
+pre#example-6 {
+  border: dotted;
   border-width: 10px 4px;
   border-radius: 10px 40px;
-</pre>
+}
 
-<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px  !important; border-radius: 40px; width: 90%;">  border: dashed;
+pre#example-7 {
+  border: dashed;
   border-width: 2px 4px;
   border-radius: 40px;
-</pre>
-
-<h2 id="Live_Samples" name="Live_Samples">ライブサンプル</h2>
-
-<ul>
- <li>例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
- <li>例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
- <li>例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
- <li>例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
- <li>例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+{{EmbedLiveSample("Examples", "200", "1150")}}
+
+### ライブサンプル
+
+ - 例 1 : [http://jsfiddle.net/Tripad/qnGKj/2/](http://jsfiddle.net/Tripad/qnGKj/2/)
+ - 例 2 : [http://jsfiddle.net/Tripad/qnGKj/3/](http://jsfiddle.net/Tripad/qnGKj/3/)
+ - 例 3 : [http://jsfiddle.net/Tripad/qnGKj/4/](http://jsfiddle.net/Tripad/qnGKj/4/)
+ - 例 4 : [http://jsfiddle.net/Tripad/qnGKj/5/](http://jsfiddle.net/Tripad/qnGKj/5/)
+ - 例 5 : [http://jsfiddle.net/Tripad/qnGKj/6/](http://jsfiddle.net/Tripad/qnGKj/6/)
+
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.border-radius")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</li>
-</ul>
+ - border-radius に関する CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, {{cssxref("border-end-end-radius")}}