CSS-Eigenschaft border-image-outset

❮ Vorige Nächste ❯

Die CSS-Eigenschaft border-image-outset legt fest, um wie viel das Randbild über den Rand des Elements hinaus verlängert wird.

Die Eigenschaft border-image-outset nimmt von einem bis vier Ausgangswerten an.

Wenn ein Wert angegeben wird, werden alle vier Outsets angegeben.
Wenn zwei Werte angegeben werden, gibt der erste die obere und untere Ausgangsposition an, und der zweite die rechte und linke Ausgangsposition.
Wenn drei Werte angegeben werden, gibt der erste den oberen Anfang an, der zweite den rechten und linken Anfang und der dritte den unteren Anfang.
Wenn vier Werte angegeben werden, setzen sie die Ausgangssituationen auf der oberen, rechten, unteren und linken Seite in dieser Reihenfolge.

Anfangswert	0
Gilt für	Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf "collapse" eingestellt ist. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Nein
Version	CSS3
DOM Syntax	object.style.borderImageOutset = "20px";

Syntax

border-image-outset: length | number | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .border { 
      border: 10px solid transparent;
      padding: 15px; 
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" );
      border-image-slice: 30;
      border-image-repeat: round;
      border-image-outset:10px 0 15px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border-image-outset</h2>
    <p class="border">Hallo Welt!</p>
    <p>Hier ist das Originalbild:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%">
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
length	Es gibt an, in welchem Abstand von den Rändern das Randbild erscheint. Der Standardwert ist 0.
number	Die Größe des Randbildes beginnt als Vielfaches der entsprechenden Randbreiten des Elements.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.