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>

Versuch es selber!

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.