border-image-width

Probieren Sie es aus

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

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

Wenn der Wert dieser Eigenschaft größer ist als die border-width des Elements, wird das Randbild über den Rand der Polsterung (und/oder des Inhalts) hinausgehen.

Syntax

/* Keyword value */
border-image-width: auto;

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

Die border-image-width-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden, die aus der folgenden Liste ausgewählt werden.

• Wenn ein Wert angegeben ist, gilt dieselbe Breite für alle vier Seiten.
• Wenn zwei Werte angegeben sind, gilt die erste Breite für den oberen und unteren Rand, die zweite für den linken und rechten Rand.
• Wenn drei Werte angegeben sind, gilt die erste Breite für den oberen Rand, die zweite für den linken und rechten, und die dritte für den unteren Rand.
• Wenn vier Werte angegeben sind, gelten die Breiten in der Reihenfolge (im Uhrzeigersinn) für den oberen, rechten, unteren und linken Rand.

Werte

<length-percentage>

Die Breite des Randes, angegeben als <length> oder <percentage>. Prozentsätze beziehen sich auf die Breite des Randbildbereichs für horizontale Abstände und die Höhe des Randbildbereichs für vertikale Abstände. Darf nicht negativ sein.

<number>

Die Breite des Randes, angegeben als Vielfaches der entsprechenden border-width. Darf nicht negativ sein.

auto

Die Breite des Randes entspricht der intrinsischen Breite oder Höhe (je nachdem, was anwendbar ist) des entsprechenden border-image-slice. Wenn das Bild die erforderliche intrinsische Dimension nicht hat, wird stattdessen die entsprechende border-width verwendet.

Formale Definition

Formale Syntax

border-image-width = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

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

Beispiele

Ein Randbild kacheln

Dieses Beispiel erstellt ein Randbild mit der folgenden ".png"-Datei, die 90 mal 90 Pixel groß ist:

Daher ist jeder Kreis im Ausgangsbild 30 mal 30 Pixel groß.

HTML

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Hintergründe und Ränder
• CSS lernen: Hintergründe und Ränder
• Randbilder in CSS: Ein Schwerpunktbereich für Interop 2023 im MDN-Blog (2023)