Übersicht

Die border-image-repeat CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.

Initialwertstretch
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* border-image-repeat: Typ */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertikal */
border-image-repeat: round stretch;

/* Globale Werte */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Werte

type
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.
horizontal
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
vertical
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
stretch
Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
repeat
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
round
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.
inherit
Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.

Formale Syntax

[ stretch | repeat | round | space ]{1,2}

Beispiele

Siehe border-image für Beispiele, welche Auswirkungen Wiederholungswerte haben.

Spezifikationen

Spezifikation Status Anmerkung
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-image-repeat' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 15Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 15IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 15Opera Android ? Safari iOS Vollständige Unterstützung 9.3Samsung Internet Android ?
roundChrome Vollständige Unterstützung 30Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 15IE Vollständige Unterstützung 11Opera ? Safari Vollständige Unterstützung 9.1WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 15Opera Android ? Safari iOS ? Samsung Internet Android ?
spaceChrome Vollständige Unterstützung 56Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 50IE Vollständige Unterstützung 11Opera Keine Unterstützung NeinSafari Vollständige Unterstützung 9.1WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 50Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, iGadget, Sebastianz, fscholz
Zuletzt aktualisiert von: SJW,