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

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

1 files changed, 151 insertions, 201 deletions

diff --git a/files/ja/web/css/border-style/index.md b/files/ja/web/css/border-style/index.md
index 71c2fba756..de1dc86b8c 100644
--- a/files/ja/web/css/border-style/index.md
+++ b/files/ja/web/css/border-style/index.md
@@ -3,26 +3,32 @@ title: border-style
 slug: Web/CSS/border-style
 tags:
   - CSS
+  - CSS 境界
   - CSS プロパティ
-  - CSS 背景と境界
-  - Reference
-  - Web
-  - border
-  - border-style
-  - 一括指定プロパティ
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.border-style
 translation_of: Web/CSS/border-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p> <strong><code>border-style</code></strong> は <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a> の <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。</p>
+ **`border-style`** は [一括指定](/ja/docs/Web/CSS/Shorthand_properties) の [CSS](/ja/docs/Web/CSS) プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-style.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構成要素のプロパティ
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+- [`border-bottom-style`](/ja/docs/Web/CSS/border-bottom-style)
+- [`border-left-style`](/ja/docs/Web/CSS/border-left-style)
+- [`border-right-style`](/ja/docs/Web/CSS/border-right-style)
+- [`border-top-style`](/ja/docs/Web/CSS/border-top-style)
+
+## 構文
+
+```css
+/* キーワード値 */
 border-style: none;
 border-style: hidden;
 border-style: dotted;
@@ -46,199 +52,143 @@ border-style: none solid dotted dashed;
 /* グローバル値 */
 border-style: inherit;
 border-style: initial;
+border-style: revert;
 border-style: unset;
-</pre>
-
-<p><code>border-style</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。</p>
-
-<ul>
- <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じスタイルが適用される。</li>
- <li>値が<strong>2つ</strong>指定された場合、1つ目のスタイルは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
- <li>値が<strong>3つ</strong>指定された場合、1つ目のスタイルは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
- <li>値が<strong>4つ</strong>指定された場合、スタイルはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）に適用される。</li>
-</ul>
-
-<p>それぞれの値は以下の一覧にあるキーワードです。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>&lt;line-style&gt;</code></dt>
- <dd>枠線のスタイルを表すキーワード。以下の値を使用できます。
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td style="vertical-align: middle;"><code>none</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;"><code>hidden</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>none</code> 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>hidden</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;"><code>none</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>hidden</code> 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>dotted</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>dashed</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>solid</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">1本の直線、実線を表示します。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>double</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>groove</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">凹んだように見える境界線を表示します。 <code>ridge</code> の逆です。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>ridge</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">出っ張ったように見える境界線を表示します。 <code>groove</code> の逆です。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>inset</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">要素が埋め込まれて見える境界線を表示します。 <code>outset</code> の逆です。 {{cssxref("border-collapse")}} が <code>collapsed</code> に設定されたテーブルのセルに適用すると、この値は <code>groove</code> のようにふるまいます。</td>
-   </tr>
-   <tr>
-    <td style="vertical-align: middle;"><code>outset</code></td>
-    <td style="vertical-align: middle;">
-     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;">要素</div>
-    </td>
-    <td style="vertical-align: middle;">
-     <p>要素が出っ張って見える境界線を表示します。 <code>inset</code> の逆です。 {{cssxref("border-collapse")}} を <code>collapsed</code> に設定したテーブルセルに適用すると、この値は <code>ridge</code> のようにふるまいます。</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。
+
+ - 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。
+ - 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。
+ - 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
+ - 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。
+
+それぞれの値は以下の一覧にあるキーワードです。
+
+### 値
+
+- `<line-style>`
+
+  - : 境界のスタイルを記述します。以下の値を使用することができます。
+
+    - `none`
+      - : `hidden` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `none` 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
+    - `hidden`
+      - : `none` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `hidden` 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
+    - `dotted`
+      - : 連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
+    - `dashed`
+      -  : 短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
+    - `solid`
+      - : 1 本の直線、実線を表示します。
+    - `double`
+      - : 2 本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
+    - `groove`
+      - :  凹んだように見える境界線を表示します。 `ridge` の逆です。
+    - `ridge`
+      - : 出っ張ったように見える境界線を表示します。 `groove` の逆です。
+    - `inset`
+      - : 要素が埋め込まれて見える境界線を表示します。 `outset` の逆です。 {{cssxref("border-collapse")}} が `collapsed` に設定されたテーブルのセルに適用すると、この値は `groove` のようにふるまいます。
+    - `outset`
+      - : 要素が出っ張って見える境界線を表示します。 `inset` の逆です。 {{cssxref("border-collapse")}} を `collapsed` に設定したテーブルセルに適用すると、この値は `ridge` のようにふるまいます。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">プロパティのすべての値を指定したテーブル</h3>
-
-<p>プロパティのすべての値のサンプルです。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td class="b1"&gt;none&lt;/td&gt;
-    &lt;td class="b2"&gt;hidden&lt;/td&gt;
-    &lt;td class="b3"&gt;dotted&lt;/td&gt;
-    &lt;td class="b4"&gt;dashed&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b5"&gt;solid&lt;/td&gt;
-    &lt;td class="b6"&gt;double&lt;/td&gt;
-    &lt;td class="b7"&gt;groove&lt;/td&gt;
-    &lt;td class="b8"&gt;ridge&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b9"&gt;inset&lt;/td&gt;
-    &lt;td class="b10"&gt;outset&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">/* テーブルの外見を定義 */
-table {
-  border-width: 3px;
-  background-color: #52E396;
-}
-tr, td {
-  padding: 2px;
+## 例
+
+<h3 id="All_property_values">プロパティのすべての値</h3>
+
+プロパティのすべての値のサンプルです。
+
+#### HTML
+
+```html
+<pre class="b1">none</pre>
+<pre class="b2">hidden</pre>
+<pre class="b3">dotted</pre>
+<pre class="b4">dashed</pre>
+<pre class="b5">solid</pre>
+<pre class="b6">double</pre>
+<pre class="b7">groove</pre>
+<pre class="b8">ridge</pre>
+<pre class="b9">inset</pre>
+<pre class="b10">outset</pre>
+```
+
+#### CSS
+
+```css
+pre {
+  height: 80px;
+  width: 120px;
+  margin: 20px;
+  padding: 20px;
+  display: inline-block;
+  background-color: palegreen;
+  border-width: 5px;
+  box-sizing: border-box;
 }
 
 /* border-style の例示用クラス */
-.b1 {border-style:none;}
-.b2 {border-style:hidden;}
-.b3 {border-style:dotted;}
-.b4 {border-style:dashed;}
-.b5 {border-style:solid;}
-.b6 {border-style:double;}
-.b7 {border-style:groove;}
-.b8 {border-style:ridge;}
-.b9 {border-style:inset;}
-.b10 {border-style:outset;}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}</p>
-
-<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-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td><code>hidden</code> キーワードを追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.border-style")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li>
-</ul>
+.b1 {
+  border-style: none;
+}
+
+.b2 {
+  border-style: hidden;
+}
+
+.b3 {
+  border-style: dotted;
+}
+
+.b4 {
+  border-style: dashed;
+}
+
+.b5 {
+  border-style: solid;
+}
+
+.b6 {
+  border-style: double;
+}
+
+.b7 {
+  border-style: groove;
+}
+
+.b8 {
+  border-style: ridge;
+}
+
+.b9 {
+  border-style: inset;
+}
+
+.b10 {
+  border-style: outset;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('All_property_values', "1200", 450)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+ - 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}