border-image

Diese Eigenschaft ist eine Kurzschrift für folgende 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 einer bis fünf der unten aufgelisteten Werte angegeben werden.

<'border-image-source'>

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

<'border-image-slice'>

Die Maße zum Zerlegen des Quellbildes in Regionen. Bis zu vier Werte können angegeben werden. Siehe border-image-slice.

<'border-image-width'>

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

<'border-image-outset'>

Der Abstand des Rahmenbildes von der Außenseite 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 Maße des Rahmenbildes zu erfüllen. Bis zu zwei Werte können angegeben werden. Siehe border-image-repeat.

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

• MDN Verständnis von WCAG, Leitlinie 1.1 Erklärungen
• 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 werden wir ein Diamantmuster auf die Rahmen eines Elements anwenden. Die Quelle für das Rahmenbild ist eine ".png"-Datei mit 81x81 Pixeln, wobei drei Diamanten vertikal und horizontal verlaufen:

HTML

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

CSS

Um die Größe eines einzelnen Diamanten zu erreichen, verwenden wir einen Wert von 81 geteilt durch 3, also 27, um das Bild in Eck- und Randbereiche zu schneiden. Um das Rahmenbild auf der Rande der Hintergrundfläche des Elements zu zentrieren, machen wir die Werte beim Austritt gleich der Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Rahmenscheiben 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 keinen Einfluss auf das Rahmenbild. Dies liegt daran, dass border-image-outset das Bild außerhalb des Rahmenkastens platzieren kann, sodass es keinen Sinn ergibt, dass das Rahmenbild durch den Rahmenbereich abgeschnitten wird. Um abgerundete Ecken bei Verwendung eines Rahmenbildes zu erzeugen, sollte man das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, dies zu tun, indem zwei background-images verwendet werden: eins, das den Rahmenkasten 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
• Verlaufsfunktionen: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• Rahmenbilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN-Blog (2023)