border-image CSS-Eigenschaft

Probieren Sie es aus

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Zugehörige Eigenschaften

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

Syntax

/* 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.

Werte

<'border-image-source'>

Das Ausgangsbild. Siehe border-image-source.

<'border-image-slice'>

Die Maße zum Zerteilen des Ausgangsbildes in Regionen. Es können bis zu vier Werte angegeben werden. Siehe border-image-slice.

<'border-image-width'>

Die Breite des Border-Bildes. Es können bis zu vier Werte angegeben werden. Siehe border-image-width.

<'border-image-outset'>

Der Abstand des Border-Bildes 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 Kantenregionen des Ausgangsbildes angepasst werden, um die Dimensionen des Border-Bildes zu entsprechen. Es können bis zu zwei Werte angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

Assistive Technologien können Border-Bilder nicht verarbeiten. Wenn das Bild Informationen enthält, die zum Verständnis des Gesamtsinns der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis von WCAG, Leitfaden 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Bitmap

In diesem Beispiel wenden wir ein Rautenmuster auf die Ränder eines Elements an. Die Quelle für das Border-Bild ist eine ".png"-Datei mit 81 x 81 Pixeln, 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 Kantenregionen zu zerteilen. Um das Border-Bild an der Kante des Hintergrundes des Elements zu zentrieren, setzen wir die Werte für das Outset gleich der Hälfte der Werte für die Breite. Schließlich sorgt ein Repeat-Wert von round dafür, dass die Borderslices gleichmäßig passen, d.h. ohne Beschneidung oder Lücken.

#bitmap {
  width: 200px;
  background-color: #ffffaa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

Ergebnis

Gradient

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, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

Ergebnis

Runde Ränder

border-radius hat keinen Einfluss auf das Border-Bild. Dies liegt daran, dass border-image-outset das Bild außerhalb der Borderbox platzieren kann, sodass es keinen Sinn macht, dass das Border-Bild durch den Randbereich geklippt wird. Um runde Ränder zu erstellen, wenn ein Border-Bild verwendet wird, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz hierfür, indem zwei background-images verwendet werden: eines, das sich auf die Borderbox erstreckt, und eines für die Paddingbox.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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