Übersicht

Die border-image-slice CSS Eigenschaft teilt das Bild, welches von border-image-source spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesVier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegebenen, mit der üblichen 4-Werte CSS Syntax, abgeleitet.

Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort fill gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).

Die Eigenschaften border-image-repeat, border-image-width, border-image-outset definieren die weitere Verwendung des Bildes.

Die Kurzschreibweise border-image kann diese Eigenschaft zu ihrem Standardwert zurücksetzen.

Initialwert100%
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe des Bildes
Medienvisuell
Berechneter Wertein bis vier Prozentwert(e) (wie angegeben) oder absolute Länge(n) plus das Schlüsselwort fill, falls angegeben
Animationstypdiskret
Kanonische Reihenfolgedie Prozentwerte oder Längen gefolgt vom Schlüsselwort fill

Syntax

/* border-image-slice: slice */
border-image-slice: 30%; 

/* border-image-slice: horizontal vertikal */
border-image-slice: 10% 30%;

/* border-image-slice: oben vertikal unten */
border-image-slice: 30 30% 45;

/* border-image-slice: oben rechts unten links */
border-image-slice: 7 12 14 5; 

/* border-image-slice: … fill */
/* Der fill Wert kann zwischen beliebigen Werten platziert werden */
border-image-slice: 10% fill 7 12;

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

Werte

slice
ist eine <number> oder eine <percentage>, welche den Abstand der vier Schneidelinien vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
horizontal
ist eine <number> oder eine <percentage>, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
vertical
ist eine <number> oder eine <percentage>, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
top
ist eine <number> oder eine <percentage>, welche den Abstand der oberen Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
bottom
ist eine <number> oder eine <percentage>, welche den Abstand der unteren Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
right
ist eine <number> oder eine <percentage>, welche den Abstand der rechten Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
left
ist eine <number> oder eine <percentage>, welche den Abstand der linken Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind <percentage> Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
fill
ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.
inherit
ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.

Formale Syntax

<number-percentage>{1,4} && fill?

wobei
<number-percentage> = <number> | <percentage>

Spezifikationen

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-image-slice' 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 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).
IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung 4.1
Mit Präfix
Vollständige Unterstützung 4.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox 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).
Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: mdnwebdocs-bot,