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 aufgeführten Werte angegeben werden.

<'border-image-source'>

Die Quell-Bilddatei. Siehe border-image-source.

<'border-image-slice'>

Die Abmessungen zum Zerteilen des Quellbildes in Regionen. Bis zu vier Werte können angegeben werden. Siehe border-image-slice.

<'border-image-width'>

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

<'border-image-outset'>

Der Abstand des Rahmenbilds von der äußeren Kante des Elements. Bis zu vier Werte können angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

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

Assistive Technologien können keine Rahmenbilder verarbeiten. 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 WCAG, Erklärung der Richtlinie 1.1
• Verständnis des Erfolgskriteriums 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 Rahmenbild ist eine ".png"-Datei von 81 x 81 Pixeln, 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 anzupassen, verwenden wir einen Wert von 81 geteilt durch 3, oder 27, um das Bild in Eck- und Randregionen zu schneiden. Um das Rahmenbild am Rand des Hintergrunds des Elements zu zentrieren, machen wir die Werte für den Außensatz gleich der Hälfte der Werte für die Breite. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Rahmenschnitte gleichmäßig passen, d.h. ohne Zuschneiden 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 Effekt auf das Rahmenbild. Dies liegt daran, dass border-image-outset das Bild außerhalb des Randrahmens platzieren kann, sodass es keinen Sinn macht, das Rahmenbild durch den Randbereich abzuschneiden. Um runde Kanten bei Verwendung eines Rahmenbilds 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, dies zu erreichen, indem zwei background-images verwendet werden: eines, das den Randrahmen erweitert, und ein weiteres für den Innenabstand.

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
• Verlauf-Funktionen: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• Rahmenbilder in CSS: Ein Schlüsselbereich für das Interop 2023 im MDN-Blog (2023)