CSS border-image Eigenschaft

Definition und Verwendung

Das border-image-Attribut ist eine Abkürzung für die folgenden Attribute:

Falls der Wert weggelassen wird, wird der Standardwert festgelegt.

Tipp:Verwenden Sie die border-image-*-Attribute, um schöne anpassungsfähige Buttons zu erstellen!

Siehe auch:

CSS3-Tutorial:CSS3 Ränder

Beispiel

Definieren Sie das Bild als Umrandung des div-Elements:

div
{
-webkit-border-image:url(border.png) 30 30 rund; /* Safari 5 */
-o-border-image:url(border.png) 30 30 rund; /* Opera */
border-image:url(border.png) 30 30 rund;
}

Probieren Sie es selbst aus

Am Ende der Seite gibt es mehr Beispiele.

CSS-Syntax

border-image: quelle Teilung breite außen wiederholen|initial|inherit;

Attributswert

Wert Beschreibung Test
border-image-source Der Pfad zum Bild, das in der Umrandung verwendet wird.
border-image-slice Die innere Verschiebung der Bildumrandung.
border-image-width Die Breite der Bildumrandung.
border-image-outset Die Menge, um die die Bildumrandungsfläche über die Umrandung hinausgeht.
border-image-repeat Ob die Bildumrandung gestrebt (wiederholt), rund (volle Fläche) oder gestreckt (gestreckt) sein soll. Test

Technische Details

Standardwert: keine 100% 1 0 gestreckt
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.borderImage="url(border.png) 30 30 rund"

Mehr Beispiele

Border-image-Button
Dieses Beispiel zeigt, wie man mit dem border-image-Attribut einen Button erstellt.

Browser-Unterstützung

Die in der Tabelle angegebenen Zahlen geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-