border-image

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

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

/* 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 fünf der unten aufgelisteten Werte angegeben werden.

<'border-image-source'>

Das Quellbild. Siehe border-image-source.

<'border-image-slice'>

Die Abmessungen für das Zerteilen des Quellbildes in Bereiche. Bis zu vier Werte können angegeben werden. Siehe border-image-slice.

<'border-image-width'>

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

<'border-image-outset'>

Der Abstand des Randbildes von der Außenkante des Elements. Bis zu vier Werte können angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Definiert, wie die Randbereiche des Quellbildes angepasst werden, um die Abmessungen des Randbildes zu füllen. Bis zu zwei Werte können angegeben werden. Siehe border-image-repeat.

Hilfstechnologie kann Randbilder nicht parsen. Wenn das Bild Informationen enthält, die zum Verständnis des gesamten Zwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verstehen von WCAG, Richtlinie 1.1 Erklärungen
• Verstehen des Erfolgskriteriums 1.1.1 | Verstehen von WCAG 2.0

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>* )  

In diesem Beispiel werden wir ein Rautenmuster auf die Ränder eines Elements anwenden. Die Quelle für das Randbild ist eine ".png"-Datei mit 81 mal 81 Pixel, mit drei Rauten vertikal und horizontal:

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 zerteilen. Um das Randbild auf die Kante des Hintergrunds des Elements zu zentrieren, machen wir die Abstands-Werte gleich der Hälfte der Breiten-Werte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Randsegmente gleichmäßig passen, d. h. ohne Beschneidungen oder Lücken.

#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

HTML

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

CSS

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

Ergebnis

border-radius hat keinen Einfluss auf das Randbild. Dies liegt daran, dass border-image-outset das Bild außerhalb des Randkastens platzieren kann, sodass es keinen Sinn macht, dass das Randbild vom Randbereich abgeschnitten wird. Um abgerundete Ränder zu erstellen, wenn Sie ein Randbild verwenden, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz dafür, indem zwei background-image-Bilder verwendet werden: eines, das den Randkasten erweitert, und ein weiteres für den Innenabstandskasten.

HTML

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

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

• border
• outline
• box-shadow
• background-image
• <url> Typ
• Gradient-Funktionen: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• Randbilder in CSS: Ein Schlüsselbereich für Interop 2023 im MDN-Blog (2023)