---
title: border-image
slug: Web/CSS/border-image
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Ränder
  - Grafik
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/border-image
---
<div>{{CSSRef("CSS Borders")}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>border-image</code> CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.<br>
 <br>
 <code>border-image</code> wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch <code>border-image-source</code> oder die Kurzschreibweise <code>border-image</code> gesetzt werden kann, <code>none</code> ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.</p>

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

<h2 id="Syntax">Syntax</h2>

{{csssyntax}}

<h3 id="Werte">Werte</h3>

<p>Siehe die entsprechenden Eigenschaften der verschiedenen Werte.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Bild_wiederholt_(repeat)">Bild wiederholt (repeat)</h3>

<p>Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.</p>

<pre class="brush:css">.beispiel {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}
</pre>

<p>Ergibt:<br>
 <img alt="Beispiel für border-image: repeat" src="https://mdn.mozillademos.org/files/8199/borderRepeat.png" style="height: 120px; width: 350px;"></p>

<h3 id="Bild_wiederholt_(round)">Bild wiederholt (round)</h3>

<p>Die Option <code>round</code> ist eine Variante der <code>repeat</code> Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.</p>

<pre class="brush: css">.beispiel {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}</pre>

<p>Ergibt:<br>
 <img alt="Beispiel für border-image: round" src="https://mdn.mozillademos.org/files/8201/borderRound.png" style="height: 180px; width: 350px;"></p>

<h3 id="Bild_gestreckt">Bild gestreckt</h3>

<p>Die <code>stretch</code> Option streckt die Bilder, um den Randbereich zu füllen.</p>

<pre class="brush:css">.beispiel {
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}</pre>

<p>Ergibt:<br>
 <img alt="Beispiel für border-image: stretch" src="https://mdn.mozillademos.org/files/8203/borderStretch.png" style="height: 120px; width: 350px;"></p>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

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