w3docs logo

CSS-Eigenschaft border-image-source

Die CSS-Eigenschaft border-image-source legt das Quellbild für die Erstellung des Randbildes eines Elements fest.

Wenn der Wert auf "none"eingestellt ist oder das Bild nicht angezeigt werden kann, werden die Rahmenstile verwendet.

Anfangswert none
Gilt für Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf "collapse" eingestellt ist. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.borderImageSource = "url()";

Syntax

border-image-source: none | image | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .border { 
      border: 10px solid transparent;
      padding: 15px;
      border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");  
      border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-image-source</h2>
    <p class="border">Hallo Welt!</p>
    <p>Hier ist das Originalbild:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%">
  </body>
</html>

Werte

Wert Beschreibung
none Es wird kein Bild eingestellt.
image Der Pfad zum Bild wird als Rand angewendet.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+
❮ Vorige Nächste ❯
Finden Sie das nützlich?