CSS border-image-Eigenschaft

Die Kurzschreibweise border-image ermöglicht die Angabe eines Bildes als Rahmen um ein Element.

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

Diese Kurzschreibweise kombiniert mehrere einzelne border-image-Eigenschaften. Ausgelassene Werte verwenden ihre Standardwerte. Siehe Hinweise zu den einzelnen Unter-Eigenschaften unten:

border-image-source - Wenn der Wert „none“ ist oder das Bild nicht angezeigt werden kann, werden die Rahmenstile verwendet.
border-image-slice - Der mittlere Teil des Bildes wird als vollständig transparent behandelt, es sei denn, der Wert „fill“ ist festgelegt.
border-image-width - Wenn der Wert dieser Eigenschaft größer ist als die border-width des Elements, erstreckt sich das Rahmenbild über den padding-Rand (und/oder content) hinaus. Beachten Sie auch, dass diese Eigenschaft mit einem, zwei, drei oder vier Werten angegeben werden kann.
border-image-outset - Auch diese kann mit einem, zwei, drei oder vier Werten angegeben werden.
border-image-repeat - Sie kann mit zwei Werten angegeben werden. Wenn der zweite Wert ausgelassen wird, wird angenommen, dass er dem ersten entspricht. Wird nur ein Wert festgelegt, gilt er für alle vier Seiten. Werden zwei Werte festgelegt, gilt der erste für oben und unten, der zweite für links und rechts.

Eigenschaft	Wert
Anfangswert	none 100% 1 0 stretch
Gilt für	Alle Elemente, außer internen Tabellenelementen, wenn border-collapse auf „collapse“ steht. Gilt auch für ::first-letter.
Vererbbar	Nein
Animierbar	Nein
Version	CSS3
DOM-Syntax	object.style.borderImage = "url(border.png) 30 round"

Syntax

Syntax der CSS border-image-Eigenschaft

css

border-image: source slice width outset repeat | initial | inherit;

Beispiel für die border-image-Eigenschaft:

Beispiel für die CSS border-image-Eigenschaft

html

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

Try it Yourself »

Ergebnis

SS border-image-Eigenschaft

Beispiel für die border-image-Eigenschaft mit mehreren Werten:

Beispiel für die CSS border-image-Eigenschaft mit verschiedenen Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
border-image-source	Gibt das Quelldatenbild an, das zum Erstellen des Rahmenbilds verwendet wird. Dies kann eine URL, ein Data-URI, ein CSS-Verlauf oder ein Inline-SVG sein.
border-image-slice	Gibt an, wie das von border-image-source angegebene Bild geschnitten wird. Das Bild wird immer in neun Abschnitte geschnitten: vier Ecken, vier Kanten und die Mitte.	Ausführen »
border-image-width	Gibt die Breite des Rahmenbilds an.
border-image-repeat	Gibt an, ob das Rahmenbild wiederholt, gerundet oder gestreckt wird.	Ausführen »
initial	Legt die Eigenschaft auf ihren Standardwert fest.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was ist laut dem Inhalt der angegebenen URL über die CSS border-image-Eigenschaft wahr?

Die CSS border-image-Eigenschaft ist eine Kurzschreibweise zum Festlegen der einzelnen border-image-Eigenschaften, d. h. border-image-source, border-image-slice, border-image-width, border-image-outset und border-image-repeat, in einer einzigen Deklaration.Die border-image-Eigenschaft ermöglicht es Entwicklern nicht, ein Bild als Rahmen um ein Element anzugeben.Die border-image-Eigenschaft kann mit allen HTML-Elementen verwendet werden.Die CSS border-image-Eigenschaft kann nicht animiert werden und gilt nicht für Tabellenelemente, wenn border-collapse auf collapse festgelegt ist.Die CSS border-image-Eigenschaft benötigt nur einen Wert, um zu funktionieren.

CSS border-image-Eigenschaft ​

Syntax ​

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

Ergebnis ​

Beispiel für die border-image-Eigenschaft mit mehreren Werten: ​

Werte ​