CSS/Eigenschaften/border-image

Die Eigenschaft border-image ersetzt eine Rahmenlinie durch ein Hintergrundbild

Erlaubte Werte

• durch Leerzeichen getrennte Angaben zu
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzeleigenschaften

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

div {
  border-image: url(Border-image.png) 99 102 stretch;
}

• geladen wird das Bild: Border-image.png
• Abgeschnitten wird jeweils bei 99 Pixeln ab der Ober- und Unterkante, und bei 102 Pixeln ab der rechten und linken Kante
• Das Bild wird nicht wiederholt, sondern gestreckt.

Beachten Sie:

• border-image ist die Kurzschreibform für die Werte border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat

Empfehlung: Um den Elementen thead, tbody, tfoot oder tr einen sichtbaren Rahmen zuzuweisen, müssen die Rahmen innerhalb der Tabelle zusammenfallen (d. h. table { border-collapse: collapse; })

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen
  • border-image

Weblinks

• Spezifikation (W3C): Border Images
• MDN: Border-image generator