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

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

<p>Die CSS Eigenschaft <code>border-image-width</code> definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft {{cssxref("border-width")}} durch ihren Wert überschrieben.</p>

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

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

<pre class="brush:css">/* border-image-width: <em>all</em> */
border-image-width: 3;

/* border-image-width: <em>vertical horizontal</em> */
border-image-width: 2em 3em;

/* border-image-width: <em>top horizontal bottom</em> */
border-image-width: 5% 15% 10%;

/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
border-image-width: 5% 2em 10% auto;

/* Globale Werte */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
</pre>

<p>wobei:</p>

<dl>
 <dt><em>width</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.</dd>
 <dt><em>vertical</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd>
 <dt><em>horizontal</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd>
 <dt><em>top</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
 <dt><em>bottom</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
 <dt><em>right</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
 <dt><em>left</em></dt>
 <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
 <dt><code>inherit</code></dt>
 <dd>Ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements geerbt werden.</dd>
</dl>

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

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>Repräsentiert ein Vielfaches des berechneten Wertes der {{cssxref("border-width")}} Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.</dd>
 <dt><code>auto</code></dt>
 <dd>Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

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

<h3 id="HTML-Inhalt">HTML-Inhalt</h3>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
</pre>

<h3 id="CSS-Inhalt">CSS-Inhalt</h3>

<pre class="brush: css">p{
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
   border-image-slice:30;
   border-image-width:20px;
   border-image-repeat: round;
   padding:40px
}</pre>

<p>{{ EmbedLiveSample('Beispiele', '480', '320') }}</p>

<h2 id="Specifications" name="Specifications">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-width', 'border-image-width')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Ursprüngliche Spezifikation</td>
  </tr>
 </tbody>
</table>

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

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