border-image-source

Übersicht

Die border-image-source CSS Eigenschaft definiert den <image> Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf none gesetzt wird, wird der Stil verwendet, der durch border-style definiert wird.

Hinweis: Obwohl jeder <image> Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die url() Funktion angegeben werden.

Initialwertnone
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter (en-US).
VererbtNein
Berechneter Wertnone oder das Bild mit absoluter URI
Animationstypdiskret

Syntax

/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */
border-image-source: none;

/* image.jpg wird als Bild verwendet */
border-image-source: url(image.jpg);

/* Farbverlauf wird als Bild verwendet */
border-image-source: linear-gradient(to top, red, yellow);

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

Formale Syntax

border-image-source = 
none |
<image>

<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>

<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )

<image-set()> =
image-set( <image-set-option># )

<cross-fade()> =
cross-fade( <cf-image># )

<element()> =
element( <id-selector> )

<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)

<image-tags> =
ltr |
rtl

<image-src> =
<url> |
<string>

<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>

<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]

<cf-image> =
<percentage>? &&
[ <image> | <color> ]

<id-selector> =
<hash-token>

<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]

<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<cmyk-component> =
<number> |
<percentage>

<alpha-value> =
<number> |
<percentage>

<linear-color-stop> =
<color> &&
<length-percentage>?

<linear-color-hint> =
<length-percentage>

<length-percentage> =
<length> |
<percentage>

<hue> =
<number> |
<angle> |
none

<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
<xyz-space> [ <number> | none ]{3}

<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020

<xyz-space> =
xyz |
xyz-d50 |
xyz-d65

Beispiele

Siehe border-image für Beispiele, welchen Einfluss die verschiedenen Werte haben.

Spezifikationen

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

Browser Kompatibilität

BCD tables only load in the browser