CSS/Eigenschaften/border-image

Die Eigenschaft border-image zeichnet ein Bild um ein bestimmtes Element. Sie ersetzt die normale border des Elements.
Früher für Schmuckrahmen und abgerundete Ecken verwendet, lassen sich heute mit im CSS erzeugen Verläufen interessante Effekte erzielen.

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-style: solid;
  border-width: 1em;
               /* source | slice */
  border-image: linear-gradient(to top right, transparent, steelBlue) 1;
}
.schmuckrahmen {
               /* source | slice | width | outset | repeat */
  border-image: url(Border-image.png) 90 60 stretch 1em;
}

• Im obenen Beispiel erzeugt der Browser einen mit linear-gradient() definierten Verlauf
• Für Elemente mit der Klasse schmuckrahmen wird
  • ein png geladen und
  • für die Ecken jeweils bei 90 Pixeln ab der Ober- und Unterkante, und bei 60 Pixeln ab der rechten und linken Kante abgeschnitten
  • An den Seitenkanten wird das Bild nicht wiederholt, sondern gestreckt.
  • Die Breite beträgt 1em

Beachten Sie: Es sollte eine border definiert werden, falls das Bild nicht geladen wird.

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

• Tricks mit border-image
  • border-image

Weblinks

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