border-image

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

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

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.

• MDN Understanding WCAG, Richtlinie 1.1 Erklärungen
• Understanding Success Criterion 1.1.1 | Understanding 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 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:

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.

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

<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()
• Border-Bilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN-Blog (2023)