CSS border-image-width Eigenschaft

Die CSS-Eigenschaft border-image-width legt die Breite des Rahmenbildes eines Elements fest — also wie dick der bildbasierte Rahmen um die Box gezeichnet wird. Sie gehört zu den CSS3-Eigenschaften.

Wann sie verwendet werden sollte

border-image-width wird nur benötigt, wenn für ein Element bereits ein Rahmenbild mit border-image-source (und üblicherweise border-image-slice) gesetzt ist. Allein bewirkt sie nichts.

Ein wichtiger Hinweis: border-image-width ist nicht dasselbe wie die reguläre border-width. Die einfache border-width reserviert Platz im Box-Modell und beeinflusst das Layout, während border-image-width nur steuert, wie breit das Bild im Rahmenbereich gezeichnet wird. Wird das Bild breiter als der tatsächliche Rahmen gemacht, kann es nach innen über das Padding/den Inhalt des Elements überlaufen, ohne andere Inhalte zu verschieben. Deshalb setzen die meisten Beispiele zuerst einen transparenten border und dimensionieren dann das Bild mit border-image-width.

Akzeptierte Wertetypen

Die Breite jeder Seite kann auf verschiedene Weisen angegeben werden:

<length> — eine feste Größe wie z. B. 20px.
<number> — ein Multiplikator der entsprechenden border-width. border-image-width: 2 bedeutet „doppelte Rahmenbreite". Dieser Typ wird für den Anfangswert 1 verwendet.
<percentage> — relativ zur Größe des Rahmenbildbereichs (horizontale Prozentsätze beziehen sich auf dessen Breite, vertikale auf dessen Höhe).
auto — verwendet die intrinsische Breite/Höhe des entsprechenden border-image-slice, oder die zugehörige border-width, wenn keine intrinsische Größe vorhanden ist.

Anzahl der Werte

border-image-width akzeptiert einen bis vier Werte und folgt dabei der standardmäßigen CSS-Kurzschreibweise im Uhrzeigersinn:

Ein Wert — gilt für alle vier Seiten.
Zwei Werte — erster Wert für oben/unten, zweiter für links/rechts.
Drei Werte — erster Wert für oben, zweiter für links/rechts, dritter für unten.
Vier Werte — oben, rechts, unten, links (im Uhrzeigersinn, beginnend oben).

Wird ein Wert weggelassen, spiegelt er die gegenüberliegende Seite: Ein weggelassener vierter Wert übernimmt den zweiten (links = rechts), ein weggelassener dritter übernimmt den ersten (unten = oben), und ein weggelassener zweiter übernimmt den ersten (ein Wert gilt für alles).

Anfangswert	1
Gilt für	Alle Elemente, außer internen Tabellenelementen, wenn border-collapse auf collapse gesetzt ist. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageWidth = "20px";

Syntax

Syntax der CSS-Eigenschaft border-image-width

border-image-width: number | % | auto | initial | inherit;

Beispiel der Eigenschaft border-image-width:

Beispiel der CSS-Eigenschaft border-image-width mit px-Wert

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Hier ist ein weiteres Beispiel, bei dem zu sehen ist, was sich ändert, wenn ein, zwei, drei oder vier Werte verwendet werden.

Beispiel der Eigenschaft border-image-width mit verschiedenen Werten:

Beispiel der CSS-Eigenschaft border-image-width mit zwei, drei und vier Werten

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 40px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px;
      }
      .border4 {
        border: 10px solid transparent;
        padding: 55px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px 55px;
      }
    </style>
  </head>
  <body>
    <h1>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Probier es selbst »

Im obigen Beispiel verwendet .border1 einen einzigen Wert für alle Seiten, während .border4 jeder Seite eine unterschiedliche Breite zuweist — man beachte, wie die dickeren Seiten das Bild weiter nach innen malen.

Werte

Wert	Beschreibung	Ausprobieren
length	Eine Längeneinheit (px), die die Größe der border-width festlegt.	Ausprobieren »
number	Die Rahmenbreite wird als Vielfaches der entsprechenden border-width definiert. Muss nicht negativ sein, Standardwert ist 1.	Ausprobieren »
percentage	Wird relativ zur Breite des Rahmenbildbereichs für horizontale Abstände und zur Höhe des Rahmenbildbereichs für vertikale Abstände berechnet.	Ausprobieren »
auto	Die Rahmenbreite wird gleich der intrinsischen Breite oder Höhe des entsprechenden border-image-slice gesetzt.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die Eigenschaft 'border-image-width' in CSS?

Sie legt die Breite des Rahmens eines Bildes fest.Sie ermöglicht die Angabe des Bildes, das als Rahmen verwendet werden soll.Sie ermöglicht die Vergrößerung oder Verkleinerung des Rahmenbildbereichs und hat vier Werte: oben, rechts, unten und links.Sie legt das Hintergrundbild des Rahmens fest.Sie ermöglicht die Gestaltung von Rahmen mit Bildern.