border-image

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;
}

Bestandteilseigenschaften

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 aufgelisteten Werte angegeben werden.

Werte

<'border-image-source'>

Das Quellbild. Siehe border-image-source.

<'border-image-slice'>

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

<'border-image-width'>

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

<'border-image-outset'>

Der Abstand des Border-Bildes von der Außenseite des Elements. Bis zu vier Werte können angegeben werden. Siehe border-image-outset.

<'border-image-repeat'>

Bestimmt, wie die Randregionen des Quellbildes angepasst werden, um die Dimensionen des Grenzbildes zu erreichen. Bis zu zwei Werte können angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

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

• MDN Verständnis 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 Grenzbild ist eine ".png"-Datei mit 81 mal 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 zerschneiden. Um das Border-Bild in der Mitte am Rand des Hintergrunds des Elements auszurichten, setzen wir die outset-Werte gleich der Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round dafür, dass die Grenzabschnitte gleichmäßig passen, d.h. ohne Abschneiden 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

Abgerundete Ränder

border-radius hat keinen Einfluss auf das Grenzbild. Dies liegt daran, dass border-image-outset in der Lage ist, das Bild außerhalb der Border-Box zu platzieren, sodass es keinen Sinn macht, dass das Grenzbild vom Grenzbereich abgeschnitten wird. Um abgerundete Ränder bei Verwendung eines Border-Bildes zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder im Fall eines Gradienten diesen stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, dies zu tun, indem zwei background-images verwendet werden: eines, das die Border-Box erweitert, und ein weiteres 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

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 Schwerpunktbereich für Interop 2023 im MDN-Blog (2023)