border-image-source

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

Die border-image-source CSS Eigenschaft legt das Quellbild fest, das verwendet wird, um das Border Image eines Elements zu erstellen.

Probieren Sie es aus

Die Eigenschaft border-image-slice wird verwendet, um das Quellbild in Bereiche zu unterteilen, die dann dynamisch auf das endgültige Border Image angewendet werden.

Syntax

css
/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;

Werte

none

Es wird kein Border Image verwendet. Stattdessen wird das durch border-style definierte Erscheinungsbild angezeigt.

<image>

Bildreferenz zur Verwendung für den Rand.

Formale Definition

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

Formale Syntax

border-image-source = 
none |
<image>

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Beispiele

Einfaches Beispiel

css
.box {
  border-image-source: url("image.png");
}

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-source

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch