border-image

Übersicht

Die border-image CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.

border-image wird anstatt der Randstile benutzt, die durch die border-style Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von border-image-source, welcher entweder durch border-image-source oder die Kurzschreibweise border-image gesetzt werden kann, none ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.

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

Syntax

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Werte

Siehe die entsprechenden Eigenschaften der verschiedenen Werte.

Beispiele

Bild wiederholt (repeat)

Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Ergibt:
Beispiel für border-image: repeat

Bild wiederholt (round)

Die Option round ist eine Variante der repeat Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Ergibt:
Beispiel für border-image: round

Bild gestreckt

Die stretch Option streckt die Bilder, um den Randbereich zu füllen.

.beispiel { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Ergibt:
Beispiel für border-image: stretch

Spezifikation

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-image' in dieser Spezifikation.
Anwärter Empfehlung  

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
border-imageChrome Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 15
Hinweise
Vollständige Unterstützung 15
Hinweise
Hinweise Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Hinweise Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Hinweise From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
Hinweise Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Vollständige Unterstützung 3.5
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 11
Vollständige Unterstützung 11
Keine Unterstützung 10.5 — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 6
Vollständige Unterstützung 6
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 2
Mit Präfix
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 18
Vollständige Unterstützung 18
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 15
Hinweise
Vollständige Unterstützung 15
Hinweise
Hinweise Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Hinweise Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Hinweise From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
Hinweise Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Vollständige Unterstützung 4
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 11
Vollständige Unterstützung 11
Keine Unterstützung 11 — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari iOS Vollständige Unterstützung 6
Vollständige Unterstützung 6
Vollständige Unterstützung 3.2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 1.0
Mit Präfix
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
fillChrome Vollständige Unterstützung 16Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 15IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 15Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 1.0
<gradient>Chrome Vollständige Unterstützung 7Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 29IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 29Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung 1.0
optional <border-image-slice>Chrome Vollständige Unterstützung 16Edge 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 Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 15Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.