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

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Abkürzung 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 Quellbild. Siehe border-image-source.

<'border-image-slice'>

Die Maße zum Zerschneiden des Quellbildes in Bereiche. Es können bis zu vier Werte angegeben werden. Siehe border-image-slice.

<'border-image-width'>

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

<'border-image-outset'>

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

<'border-image-repeat'>

Definiert, wie die Randbereiche des Quellbildes angepasst werden, um in die Maße des Randbildes zu passen. Es können bis zu zwei Werte angegeben werden. Siehe border-image-repeat.

Barrierefreiheit

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

• MDN Verständnis der WCAG, Erläuterungen zur Leitlinie 1.1
• Verständnis der Erfolgskriterium 1.1.1 | Verständnis der 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 werden wir ein Rautenmuster auf die Ränder eines Elements anwenden. Die Quelle für das Randbild ist eine ".png"-Datei mit 81 x 81 Pixeln, mit drei Rauten, die vertikal und horizontal verlaufen:

HTML

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

CSS

Um die Größe einer einzelnen Raute zu erreichen, werden wir einen Wert von 81 geteilt durch 3 oder 27 verwenden, um das Bild in Eck- und Randbereiche zu zerschneiden. Um das Randbild auf der Kante des Hintergrunds des Elements zu zentrieren, setzen wir die Werte für das Hervortreten gleich der Hälfte der Breitenwerte. Schließlich wird ein Wiederholungswert von round die Randscheiben gleichmäßig anpassen, d.h. ohne Zuschnitt 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

Verlauf

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 Effekt auf das Randbild. Das liegt daran, dass border-image-outset in der Lage ist, das Bild außerhalb der Randbox zu platzieren, weshalb es keinen Sinn macht, das Randbild durch den Randbereich zuschneiden zu lassen. Um abgerundete Ränder bei Verwendung eines Randbildes zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken schaffen oder, im Fall eines Verlaufs, ihn stattdessen als Hintergrund zeichnen. Unten zeigen wir eine Methode, dies zu tun, indem zwei background-images verwendet werden: eine, die die Randbox ausdehnt, und eine andere für die Polsterbox.

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