Rahmenbild - CSS-Tricks | CSS-Almanach 2025

border-image ist eine Kurzform-Eigenschaft, mit der Sie ein Bild oder einen CSS-Verlauf als Rand eines Elements verwenden können.

.module ( border-image: url(border.png.webp) 25 25 round; )

Die border-imageEigenschaft kann auf jedes Element angewendet werden, außer auf interne Tabellenelemente (z. B. tr, th, td), wenn diese Option festgelegt border-collapseist collapse.

Eigenschaften

Die einzige erforderliche Eigenschaft für die border-imageKurzschrift ist border-image-source. Die anderen Eigenschaften verwenden standardmäßig ihre Anfangswerte, wenn sie nicht angegeben sind. Dies sind die border-imageEigenschaften in der Reihenfolge:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Diese Eigenschaft gibt die Quelle für das Rahmenbild an. Dies kann eine URL, ein Daten-URI, ein CSS-Gradient oder ein Inline-SVG sein (obwohl die Unterstützung für Inline-SVG eingeschränkt ist, siehe Hinweise zur Verwendung von SVG).

Der Anfangswert ist none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Die Werte dieser Eigenschaft teilen dem Browser mit, wo das Bild „geschnitten“ werden soll, um die Rahmen zu erstellen. Das Bild ist in 9 Abschnitte unterteilt - die vier Ecken, die vier Seiten und die Mitte.

Acht Herzen in einem Rahmenbild, vergrößert, um Details zu zeigen. Die roten Linien zeigen Scheiben an.

Wenn Sie denken, dass das absurd klingt, sind Sie in guter Gesellschaft. Vor einigen Jahren gab es in Eric Myers Blog eine lange Diskussion über dieses Thema, in der sich viele Größen der Frontend-Entwicklung einmischten.

In dieser Demo wiederholt sich ein Herz um die Grenze des Div. Das border-image-sourceBild ist ein zusammengesetztes Bild aus acht gleichen Herzsymbolen, die so geschnitten sind, dass auf jeder Seite des Elements die volle Herzform verwendet wird.

Siehe die Demo zum Stiftrahmenbild: Symbolrand durch CSS-Tricks (@ css-Tricks) auf CodePen.

Weitere Hinweise zur Verwendung

Obwohl sich die Unterstützung für border-imageverbessert hat - sie wird in allen aktuellen Browserversionen ohne Fix unterstützt -, borderlohnt es sich immer noch , einen Fallback- Stil festzulegen . Ihr Fallback-Rahmen wird in Browsern angezeigt, die dies nicht unterstützen border-imageoder wenn das Bild nicht geladen werden kann.

Im Gegensatz zu einigen anderen Rahmeneigenschaften border-imagekann nicht animiert werden. Es kann auch nicht mit gestylt werden border-radius.

Wenn Sie a border-image-sourceund a borderBreite oder border-image-widthohne Slices deklarieren , wird das gesamte nicht geschnittene Bild an den vier Ecken des Elements platziert und auf die angegebene Breite skaliert.

verbunden

border
border-collapse
box-sizing

Mehr Informationen

border-image im CSS-Hintergrund- und Rahmenmodul Level 3 CR
border-image bei MDN
Mit border-image.com können Sie ein Bild hochladen und mit den Randschnitten spielen, bis Sie sie richtig verstanden haben. Anschließend wird das CSS für Sie generiert.
Grenzbild erklärt von Dudley Storey.

Weitere Demos

Ebenfalls von Dudley Storey, Praktisches Rahmenbild: reaktionsschneller Bilderrahmen, eine CodePen-Demo. Dies ist ein gutes Beispiel für die sinnvolle Verwendung eines Randbilds auf einem ansprechenden Bild. Beachten Sie, dass der „Rahmen“ bei kleineren Bildschirmgrößen entfernt wird.
Echte gepunktete Ränder mit SVG und Randbild, ein Stift von Lucas Lemonnier. Diese Methode ist eine Lösung für den hässlichen quadratischen „gepunkteten“ Rand und bietet Ihnen echte runde Punkte!
Verlaufstaste, ein Stift von CodePen-Benutzer GSSxGSS. Ein hübsches Beispiel für einen linearen Farbverlauf als Rahmenbild.
Filmstreifen, ein Stift von Nick Pettit. Vielleicht nicht die praktischste Demo, dies ist ein lustiges, künstlerisches Beispiel dafür, was Sie damit machen können border-image.

Browser-Unterstützung

border-imageursprünglich erforderliche Herstellerpräfixe in allen Browsern, die dies unterstützten. Jetzt funktioniert es in der neuesten Version aller Browser ohne Fixierung. Diese Tabelle zeigt sowohl die früheste Unterstützung mit Präfix als auch die früheste Unterstützung ohne Präfix, sofern zutreffend.