Web/CSS/CSS_Background_and_Borders を移動 (#2177)

- 中身を Web/CSS/CSS_Backgrounds_and_Borders/ へ移動
- Markdown化し、2021/08/22 時点の英語版に同期

5 files changed, 28 insertions, 5 deletions

diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html
index 74d0b3b379..1df6bf3bdc 100644
--- a/files/ja/learn/css/howto/create_fancy_boxes/index.html
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html
@@ -71,12 +71,12 @@ translation_of: Learn/CSS/Howto/create_fancy_boxes
 
 <h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2>
 
-<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
+<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
 
 <p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p>
 
 <ul>
- <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
+ <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
  <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li>
 </ul>
 
diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html
index 1090e44454..50dde1024a 100644
--- a/files/ja/web/css/background-color/index.html
+++ b/files/ja/web/css/background-color/index.html
@@ -147,7 +147,7 @@ background-color: unset;</pre>
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li>
  <li>{{cssxref("&lt;color&gt;")}} データ型</li>
  <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
  <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md
new file mode 100644
index 0000000000..a986269354
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -0,0 +1,11 @@
+---
+title: 境界画像作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - ツール
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+---
+このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。
+
+{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
new file mode 100644
index 0000000000..878cf642be
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -0,0 +1,12 @@
+---
+title: 境界角丸作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+---
+このツールを使用して、 CSS3 の {{cssxref("border-radius")}} の効果を生成することができます。
+
+{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html
index a7e5a5bb6b..43b9ab080f 100644
--- a/files/ja/web/css/css_backgrounds_and_borders/index.html
+++ b/files/ja/web/css/css_backgrounds_and_borders/index.html
@@ -74,9 +74,9 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
  <dd>背景画像の拡大縮小や繰り返しを変更する方法を説明します。</dd>
  <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></dt>
  <dd>CSS の色が境界を含む HTML でどのように使われるかを概観します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">境界画像作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator">境界画像作成ツール</a></dt>
  <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
  <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
  <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a></dt>
  <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>