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 eine separate border-style-Deklaration angeben, falls das Randbild nicht geladen werden kann. Obwohl die Spezifikation dies nicht ausdrücklich vorschreibt, rendern einige Browser das Randbild nicht, wenn border-style auf none oder border-width auf 0 gesetzt ist.

Bestandteil-Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 einem bis zu fünf der unten aufgeführten Werte angegeben werden.

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

Werte

<'border-image-source'>

Die Bildquelle. Siehe border-image-source.

<'border-image-slice'>

Die Dimensionen zum Zerschneiden des Quellbilds in Regionen. Es können bis zu vier Werte angegeben werden. Siehe border-image-slice.

<'border-image-width'>

Die Breite des Randbilds. Es können bis zu vier Werte angegeben werden. Siehe border-image-width.

<'border-image-outset'>

Der Abstand des Randbilds von der Außenseite des Elements. Es können bis zu vier Werte angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Definiert, wie die Randbereiche des Quellbilds angepasst werden, um die Dimensionen des Randbilds zu erfüllen. Es können bis zu zwei Werte angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

Assistive Technologie kann Randbilder nicht interpretieren. Wenn das Bild Informationen enthält, die für das Verständnis des Hauptzwecks der Seite entscheidend sind, sollte es besser semantisch im Dokument beschrieben werden.

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 wird ein Rautenmuster auf die Ränder eines Elements angewendet. Die Quelle für das Randbild ist eine ".png"-Datei mit 81 x 81 Pixeln, die drei Rauten vertikal und horizontal enthält:

Acht Rauten: vier rote Rauten, eine in jeder Ecke, und vier orangefarbene Rauten, eine auf 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 Ecken- und Kantenbereiche zu schneiden. Um das Randbild auf dem Rand des Hintergrunds des Elements zu zentrieren, setzen wir die Abstandswerte gleich der Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Randabschnitte gleichmäßig passen, d.h. ohne Abschneiden 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

Verlauf

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 Wirkung auf das Randbild. Dies liegt daran, dass border-image-outset in der Lage ist, das Bild außerhalb der Randbox zu platzieren, sodass es keinen Sinn ergibt, dass das Randbild durch den Randbereich abgeschnitten wird. Um abgerundete Ränder bei der Verwendung eines Randbilds zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, wie dies erreicht werden kann, indem zwei background-images verwendet werden: eines, das sich über die Randbox hinaus erstreckt, und ein anderes für die Padding-Box.

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 wird ein neuer Wert background-clip: border-area vorgeschlagen, um diesen Anwendungsfall zu lösen.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch