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'>

Die Quellbild. Siehe border-image-source.

<'border-image-slice'>

Die Abmessungen zum Zerteilen des Quellbilds in Bereiche. 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ßenkante 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 Abmessungen des Randbilds auszufüllen. Es können bis zu zwei Werte angegeben werden. Siehe border-image-repeat.

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

• MDN Verständnis von WCAG, Erklärung zu Leitlinie 1.1
• Verständnis des Erfolgs-Kriteriums 1.1.1 | Verständnis 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 wenden wir ein Diamantmuster auf die Ränder eines Elements an. Die Quelle für das Randbild ist eine ".png"-Datei von 81 mal 81 Pixel, mit drei Diamanten vertikal und horizontal:

HTML

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

CSS

Um die Größe eines einzelnen Diamanten zu berücksichtigen, verwenden wir einen Wert von 81 geteilt durch 3, also 27, um das Bild in Eck- und Randbereiche zu zerteilen. Um das Randbild auf der Kante des Elementhintergrunds zu zentrieren, machen wir die Werte für den Abstand gleich der Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Randstücke gleichmäßig passen, d.h. ohne Beschneiden 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 keine Auswirkung auf das Randbild. Dies liegt daran, dass border-image-outset das Bild außerhalb der Randbox platzieren kann, daher ergibt es keinen Sinn, dass das Randbild vom 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 Gradienten, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, um dies zu tun, indem zwei background-images verwendet werden: eins, das die Randbox erweitert, und ein weiteres für die Auffüllbox.

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
• Gradientenfunktionen: 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 auf dem MDN-Blog (2023)