--- title: border-image-source slug: Web/CSS/border-image-source tags: - CSS - CSS Eigenschaft - CSS Ränder - Referenz translation_of: Web/CSS/border-image-source --- <div>{{CSSRef("CSS Borders")}}</div> <h2 id="Übersicht">Übersicht</h2> <p>Die <code>border-image-source</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert den {{cssxref("<image>")}} Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf <code>none</code> gesetzt wird, wird der Stil verwendet, der durch {{cssxref("border-style")}} definiert wird.</p> <div class="note"><strong>Hinweis:</strong> Obwohl jeder {{cssxref("<image>")}} Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die <code>url()</code> Funktion angegeben werden.</div> <p>{{cssinfo}}</p> <h2 id="Syntax">Syntax</h2> <pre class="brush:css">/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */ border-image-source: none; /* image.jpg wird als Bild verwendet */ border-image-source: url(image.jpg); /* Farbverlauf wird als Bild verwendet */ border-image-source: linear-gradient(to top, red, yellow); /* Globale Werte */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; </pre> <h3 id="Formale_Syntax">Formale Syntax</h3> {{csssyntax}} <h2 id="Beispiele">Beispiele</h2> <p>Siehe {{cssxref("border-image")}} für Beispiele, welchen Einfluss die verschiedenen Werte haben.</p> <h2 id="Spezifikationen">Spezifikationen</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Spezifikation</th> <th scope="col">Status</th> <th scope="col">Anmerkung</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> <td>Ursprüngliche Definition</td> </tr> </tbody> </table> <h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> {{Compat("css.properties.border-image-source")}}