CSS border-image-repeat Eigenschaft

Die CSS-Eigenschaft border-image-repeat steuert, wie die Seiten-Slices eines border-image skaliert werden, um die Kanten eines Elements zu füllen. Sie legt fest, ob diese Slices gestreckt, wiederholt (gekachelt), gerundet werden, sodass eine ganzzahlige Anzahl von Kacheln passt, oder mit Abständen verteilt werden. Sie gehört zu den CSS3-Eigenschaften.

Wenn ein Rahmenbild angegeben wird, teilt die Eigenschaft border-image-slice es in neun Bereiche auf: vier Ecken, vier Kanten und eine Mitte. Die Ecken werden stets einmal an jeder Ecke platziert — die vier Kanten-Slices müssen jedoch oft eine Strecke abdecken, die kein genaues Vielfaches der Slice-Größe ist. border-image-repeat teilt dem Browser mit, wie er mit dieser Nichtübereinstimmung umgehen soll.

Die Eigenschaft kann mit einem oder zwei Werten definiert werden. Bei einem Wert gilt dasselbe Verhalten für alle vier Seiten. Bei zwei Werten gilt der erste für oben und unten, der zweite für links und rechts.

Anfangswert	stretch
Gilt für	Alle Elemente, außer interne Tabellenelemente, wenn border-collapse auf "collapse" gesetzt ist. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageRepeat = "round";

Syntax

Syntax der CSS border-image-repeat Eigenschaft

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Beispiel der border-image-repeat Eigenschaft:

Beispiel der CSS border-image-repeat Eigenschaft mit dem Wert round

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

Probier es selbst »

Ergebnis

Beispiel der border-image-repeat Eigenschaft mit den Werten "round" und "repeat":

Beispiel der CSS border-image-repeat Eigenschaft mit den Werten round und repeat

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

Probier es selbst »

Beispiel der border-image-repeat Eigenschaft mit den Werten "space" und "stretch":

Beispiel der CSS border-image-repeat Eigenschaft mit den Werten space und stretch

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Probier es selbst »

Verhalten der einzelnen Werte

Die vier Schlüsselwörter unterscheiden sich nur darin, wie sie damit umgehen, dass ein Kanten-Slice selten gleichmäßig in die zu füllende Seite passt:

stretch (der Standardwert) nimmt einen einzelnen Kanten-Slice und skaliert ihn so, dass er die gesamte Seite überspannt. Es findet keine Kachelung statt, daher wird ein Muster mit deutlichen Motiven (Punkte, Formen, Text) verzerrt, während ein weicher Farbverlauf oder eine gleichmäßige Textur unverändert bleibt.
repeat kachelt den Kanten-Slice in seiner natürlichen Größe und schneidet einfach ab, was nicht passt. Die Kacheln behalten ihre Proportionen, aber an jeder Ecke kann eine abgeschnittene Kachel sichtbar sein — und das Muster ist in der Regel nicht zentriert.
round kachelt ebenfalls, skaliert den Slice jedoch leicht vor, sodass eine ganzzahlige Anzahl von Kacheln genau zwischen die Ecken passt. Diese Option empfiehlt sich, wenn eine saubere, symmetrische Wiederholung ohne abgeschnittene Kacheln gewünscht wird und eine leichte Verzerrung akzeptabel ist.
space kachelt in natürlicher Größe wie repeat, schneidet jedoch keine unvollständige Kachel ab, sondern lässt sie weg und verteilt den freien Raum als gleiche Abstände zwischen den vollständigen Kacheln. (space hat die geringste Browserunterstützung der vier Werte.)

Eine praktische Faustregel: stretch für Farbverläufe und durchgehende Texturen wählen, round für dekorative Muster, bei denen Symmetrie wichtig ist, und repeat oder space, wenn das Motiv exakt in seiner Originalgröße bleiben soll.

Hinweis: border-image-repeat hat für sich allein keine Wirkung — das Element muss bereits eine border-image-source und eine von null verschiedene Rahmenbreite besitzen. Häufig wird es als Teil der Kurzschreibweise border-image angegeben und nicht eigenständig.

Werte

Wert	Beschreibung	Ausprobieren
stretch	Jeder Zwischenraum zwischen den Rahmen wird mit gestreckten Bildern gefüllt. Dies ist der Standardwert.	Ausprobieren »
repeat	Jeder Zwischenraum zwischen den Rahmen wird mit wiederholten Bildern gefüllt. Für eine korrekte Passform können Wiederholungen abgeschnitten werden.	Ausprobieren »
round	Jeder Zwischenraum zwischen den Rahmen wird mit wiederholten Bildern gefüllt. Für eine korrekte Passform können Wiederholungen gestreckt werden.	Ausprobieren »
space	Jeder Zwischenraum zwischen den Rahmen wird mit wiederholten Bildern gefüllt. Für eine korrekte Passform wird zusätzlicher Raum zwischen die Wiederholungen verteilt.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Werte können mit der CSS border-image-repeat Eigenschaft verwendet werden?

Syntax

Beispiel der border-image-repeat Eigenschaft:

Ergebnis

Beispiel der border-image-repeat Eigenschaft mit den Werten "round" und "repeat":

Beispiel der border-image-repeat Eigenschaft mit den Werten "space" und "stretch":

Verhalten der einzelnen Werte

Werte

Übung

Verwandte Eigenschaften