CSS border-image-repeat-Eigenschaft

Die CSS border-image-repeat-Eigenschaft wird verwendet, um anzugeben, ob das border-image gerundet, wiederholt oder gestreckt wird. Sie ist eine der CSS3-Eigenschaften.

Die border-image-repeat-Eigenschaft kann mit einem oder zwei Werten definiert werden. Wenn ein Wert angegeben wird, gilt er für alle vier Seiten. Wenn zwei Werte angegeben werden, gilt der erste für oben und unten und der zweite für links und rechts.

Anfangswert	stretch
Gilt für	Alle Elemente, außer interne Tabellenelemente, wenn border-collapse auf "collapse" steht. Sie gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageRepeat = "round";

Syntax

Syntax der CSS border-image-repeat-Eigenschaft

css

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Beispiel für die border-image-repeat-Eigenschaft:

Beispiel für die CSS border-image-repeat-Eigenschaft mit dem Wert „round"

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Ergebnis

CSS border-image-repeat Property

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „round" und „repeat":

Beispiel für die CSS border-image-repeat-Eigenschaft mit den Werten round und repeat

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: repeat;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „space" und „stretch":

Beispiel für die CSS border-image-repeat-Eigenschaft mit den Werten space und stretch

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
stretch	Jeder Abstand zwischen den Rändern wird mit gestreckten Bildern gefüllt. Dies ist der Standardwert.	Testen »
repeat	Jeder Abstand zwischen den Rändern wird mit wiederholten Bildern gefüllt. Zur optimalen Anpassung können Wiederholungen abgeschnitten werden.	Testen »
round	Jeder Abstand zwischen den Rändern wird mit wiederholten Bildern gefüllt. Zur optimalen Anpassung können Wiederholungen gestreckt werden.	Testen »
space	Jeder Abstand zwischen den Rändern wird mit wiederholten Bildern gefüllt. Zur optimalen Anpassung wird zusätzlicher Raum zwischen den Wiederholungen verteilt.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

CSS border-image-repeat-Eigenschaft ​

Syntax ​

Beispiel für die border-image-repeat-Eigenschaft: ​

Ergebnis ​

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „round" und „repeat": ​

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „space" und „stretch": ​

Werte ​

Praxis ​

CSS border-image-repeat-Eigenschaft

Syntax

Beispiel für die border-image-repeat-Eigenschaft:

Ergebnis

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „round" und „repeat":

Beispiel für die border-image-repeat-Eigenschaft mit den Werten „space" und „stretch":

Werte

Praxis