Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-image-width

Übersicht

Die CSS Eigenschaft border-image-width definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft border-width durch ihren Wert überschrieben.

Initialwert1
Anwendbar aufAlle Elemente, ausser table Elemente when border-collapse ist collapse. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe des Rahmens
Medienvisuell
Berechneter Wertall lengths made absolute, otherwise as specified
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* border-image-width: all */
border-image-width: 3;

/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;

/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;

/* border-image-width: top right bottom left */
border-image-width: 5% 2em 10% auto;

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

wobei:

width
Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.
vertical
Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
horizontal
Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
top
Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
bottom
Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
right
Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
left
Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
inherit
Ist ein Schlüsselwort, dass angibt, dass alle vier Werte vom berechneten Wert des Elternelements geerbt werden.

Werte

<length>
Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.
<percentage>
Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.
<number>
Repräsentiert ein Vielfaches des berechneten Wertes der border-width Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.
auto
Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.

Formale Syntax

[ <length> | <percentage> | <number> | auto ]{1,4}

Beispiele

HTML-Inhalt

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

CSS-Inhalt

p{
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
   border-image-slice:30;
   border-image-width:20px;
   border-image-repeat: round;
   padding:40px
}

Spezifikationen

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

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 15.0 13.0 (13.0) 11 15 6
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung support ? 13.0 (13.0) Nicht unterstützt ? ?

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz, supermueller
 Zuletzt aktualisiert von: Sebastianz,