CSS-Eigenschaft border-image-width

Die CSS-Eigenschaft border-image-width definiert die Breite des Randbildes.

Die Eigenschaft border-image-width kann von einem bis zu vier Werten haben - oben, rechts, unten und links.

Wir können einen, zwei, drei oder vier Werte verwenden. Wenn ein Wert definiert ist, gilt die gleiche Breite für alle vier Seiten.

Wenn zwei Werte definiert sind, gilt der erste für oben und unten, der zweite für links und rechts.

Wenn drei Werte definiert sind, gilt der erste für den oberen Teil, der zweite für den linken und rechten Teil und der dritte für den unteren Teil.

Wenn vier Werte definiert sind, gelten die Breiten für oben, rechts, unten und links wie in der Uhr. Das bedeutet, wenn der vierte Wert weggelassen wird, ist er derselbe wie der zweite. Wenn der dritte weggelassen wird, ist er derselbe wie der erste. Wenn der zweite weggelassen wird, ist er derselbe wie der erste.

Anfangswert 1
Gilt für Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf collapse ist. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.borderImageWidth = "20px";

Syntax

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

Beispiel

<!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>Ein Beispiel für border-image-width</h1>
    <p class="border">Hier ist border-image-width auf 20px gesetzt.</p>
  </body>
</html>

Hier ist ein weiteres Beispiel, wo Sie sehen können, was geändert wird, wenn ein, zwei, drei oder vier Werte verwendet werden.

Beispiel

<!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>Ein Beispiel für border-image-width</h1>
    <p class="border1">Hier ist border-image-width auf 20px. gesetzt.</p>
    <p class="border2">Hier ist border-image-width auf 20px und 10px gesetzt.</p>
    <p class="border3">Hier ist border-image-width auf 20px, 10px und 40px gesetzt.</p>
    <p class="border4">Hier ist border-image-width auf 20px, 10px, 40px und 55px gesetzt.</p>
  </body>
</html>

Werte

Wert Beschreibung
length Eine Längeneinheit (px), die die Größe von border-width definiert.
number Die Randbreite ist als ein Vielfaches der entsprechenden Rahmenbreite definiert. Er darf nicht negativ sein, und der Standardwert ist 1.
percentage Es wird berechnet in Bezug auf die Breite des Randbildbereichs für horizontale Versätze und die Höhe des Randbildbereichs für vertikale Versätze.
auto Die Randbreite wird gleich der inneren Breite oder Höhe von entsprechenden border-image-slice gemacht.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
15.0+ 13.0+ 6.0+ 15.0+

Übe dein Wissen

Welche Werte können Sie für die CSS-Eigenschaft 'border-image-width' festlegen?
Finden Sie das nützlich?