path: root/files/ja/web/css/border-image/index.html

---
title: border-image
slug: Web/CSS/border-image
tags:
  - CSS
  - CSS プロパティ
  - CSS 背景と境界
  - Reference
  - border-image
  - border-image-slice
  - border-image-source
translation_of: Web/CSS/border-image
---
<div>{{CSSRef}}</div>

<p><strong><code>border-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の<a href="/ja/docs/Web/CSS/border">境界</a>を置き換えます。</p>

<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p>このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。他の一括指定プロパティと同様、省略された値には<a href="/ja/docs/Web/CSS/initial_value">初期値</a>が設定されます。</p>

<div class="note">
<p><strong>メモ:</strong> 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers">/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
</pre>

<p><code>border-image</code> プロパティは以下に挙げられた1つから5つの値で指定することができます。</p>

<div class="note">
<p><strong>メモ:</strong> {{cssxref("border-image-source")}} の <a href="/ja/docs/Web/CSS/computed_value">計算値</a> が <code>none</code> になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。</p>
</div>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>&lt;'border-image-source'&gt;</code></dt>
 <dd>元となる画像です。 {{cssxref("border-image-source")}} を参照してください。</dd>
 <dt><code>&lt;'border-image-slice'&gt;</code></dt>
 <dd>source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。</dd>
 <dt><code>&lt;'border-image-width'&gt;</code></dt>
 <dd>境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。</dd>
 <dt><code>&lt;'border-image-outset'&gt;</code></dt>
 <dd>要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。</dd>
 <dt><code>&lt;'border-image-repeat'&gt;</code></dt>
 <dd>source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Bitmap" name="Bitmap">ビットマップ</h3>

<p>この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。</p>

<p><img alt="境界画像の例" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div id="bitmap"&gt;この要素はビットマップベースの境界画像に囲まれています。&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<p>個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための <code>27</code> を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 <code>round</code> に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。</p>

<pre class="brush:css">#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image:
      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
      27 /                    /* slice */
      36px 28px 18px 8px /    /* width */
      18px 14px 9px 4px       /* outset */
      round;                  /* repeat */
}
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Bitmap', '100%', 200)}}</p>

<h3 id="Gradient" name="Gradient">グラデーション</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div id="gradient"&gt;この要素はグラデーションの境界に囲まれています。&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush:css">#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample('Gradient')}}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<p>支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。</p>

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</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', '#the-border-image', 'border-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.border-image")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref("border")}}</li>
 <li>{{cssxref("outline")}}</li>
 <li>{{cssxref("box-shadow")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("url()", "url()")}} 関数</li>
 <li>Gradient functions: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
</ul>