border-image

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-CSS-Eigenschaft zeichnet ein Bild um ein gegebenes Element. Sie ersetzt den regulären border des Elements.

Probieren Sie es aus

Hinweis: Sie sollten einen separaten border-style angeben, falls das Rahmenbild nicht geladen werden kann. Obwohl die Spezifikation dies nicht strikt verlangt, rendern einige Browser das Rahmenbild nicht, wenn border-style auf none oder border-width auf 0 gesetzt ist.

Untergeordnete Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

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

Die border-image-Eigenschaft kann mit einer bis zu fünf der unten aufgeführten Werte spezifiziert werden.

Hinweis: Wenn der berechnete Wert von border-image-source none ist oder das Bild nicht angezeigt werden kann, wird der border-style stattdessen angezeigt.

Werte

<'border-image-source'>

Die Quelle des Bildes. Siehe border-image-source.

<'border-image-slice'>

Die Dimensionen für das Zerschneiden der Bildquelle in Bereiche. Bis zu vier Werte können angegeben werden. Siehe border-image-slice.

<'border-image-width'>

Die Breite des Rahmenbildes. Bis zu vier Werte können angegeben werden. Siehe border-image-width.

<'border-image-outset'>

Der Abstand des Rahmenbildes vom äußeren Rand des Elements. Bis zu vier Werte können angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Legt fest, wie die Randbereiche des Quellbildes angepasst werden, um mit den Dimensionen des Rahmenbildes übereinzustimmen. Bis zu zwei Werte können angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

Hilfstechnologien können Rahmenbilder nicht interpretieren. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks der Seite sind, ist es besser, diese semantisch im Dokument zu beschreiben.

Formale Definition

Anfangswertwie 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:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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

<border-image-source> =
none |
<image>

<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?

<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}

<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}

<image> =
<url> |
<gradient>

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

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

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

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

Beispiele

Bitmap

In diesem Beispiel wenden wir ein Rauten-Muster auf die Ränder eines Elements an. Die Quelle für das Rahmenbild ist eine ".png"-Datei mit 81 x 81 Pixeln, mit drei Rauten vertikal und horizontal:

Acht Rauten: vier rote Rauten, je eine in jeder Ecke, und vier orange Rauten, je eine an jeder Seite. Die Mitte ist leer.

HTML

html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

Um die Größe einer einzelnen Raute anzupassen, verwenden wir einen Wert von 81 geteilt durch 3, also 27, um das Bild in Eck- und Randbereiche zu zerschneiden. Um das Rahmenbild auf den Rand des Hintergrunds des Elements zu zentrieren, setzen wir die Werte für die Erweiterung auf die Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Rahmenschnitte gleichmäßig passen, d. h. ohne Beschneidung oder Lücken.

css
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

Ergebnis

Gradienten

HTML

html
<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

CSS

css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}

Ergebnis

Abgerundete Ränder

border-radius hat keine Auswirkung auf das Rahmenbild. Dies liegt daran, dass border-image-outset das Bild außerhalb des Rahmenkastens platzieren kann, sodass es keinen Sinn ergibt, dass das Rahmenbild vom Rahmenbereich abgeschnitten wird. Um abgerundete Ränder bei der Verwendung eines Rahmenbildes zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken gestalten oder, im Fall eines Gradienten, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, um dies zu tun, indem wir zwei background-images verwenden: ein Bild, das sich über den Rahmenkasten hinaus erstreckt, und ein weiteres für den Padding-Bereich.

HTML

html
<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

css
#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image: linear-gradient(white, white),
    linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Ergebnis

Hinweis: Es gibt einen neuen Wert background-clip: border-area, der vorgeschlagen wird, um diesen Anwendungsfall zu behandeln.

Spezifikationen

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

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
fill
<gradient>
optional <border-image-slice>

Legend

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

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch