CSS border-image-source-Eigenschaft

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

Die Eigenschaft border-image-source ist eine der CSS3-Eigenschaften.

Wenn der Wert auf „none“ festgelegt ist oder das Bild nicht angezeigt werden kann, werden die Randstile verwendet.

Anfangswert	none
Gilt für	Alle Elemente, mit Ausnahme interner Tabellenelemente, wenn border-collapse auf „collapse“ steht. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageSource = "url()";

Syntax

CSS border-image-source-Werte

css

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

Beispiel für die border-image-source-Eigenschaft:

CSS border-image-source-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Ergebnis

Beschreibung der CSS border-image-source-Eigenschaft

Werte

Wert	Beschreibung
none	Es wird kein Bild angewendet.
image	Der Pfad zum Bild wird als Rand angewendet.
initial	Legt die Eigenschaft auf ihren Standardwert fest.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Wie wird die border-image-source-Eigenschaft in CSS korrekt verwendet?

Die border-image-source-Eigenschaft kann mit einer URL verwendet werden, um den Pfad zum Bild anzugeben.Die border-image-source-Eigenschaft kann einen Farbcode als Wert enthalten.Die border-image-source-Eigenschaft wird mit dem Schlüsselwort 'none' angegeben, wenn kein Bild verwendet wird.Die border-image-source-Eigenschaft kann eine Reihe von Zahlen als Wert akzeptieren, um die Randbreite anzupassen.

CSS border-image-source-Eigenschaft ​

Syntax ​

Beispiel für die border-image-source-Eigenschaft: ​

Ergebnis ​