CSS-Border-Image-Generator

border-image mit Verlauf oder eigenem Bild gestalten: Slice, Breite, Outset und Wiederholung einstellen und CSS kopieren.

Der CSS-Border-Image-Generator gestaltet Rahmen mit border-image. Im Verlaufsmodus entsteht ein Farbverlaufsrahmen mit einer Zeile CSS, im Bildmodus zerschneidest du ein eigenes Bild per Slice in Ecken und Kanten und legst Breite, Überstand und Wiederholung fest. Die Vorschau zeigt sofort, wie Ecken und Kanten verteilt werden.

Inhalt

Quelle

Rahmenbreite px

Farbstopps

Ziehen oder mit den Pfeiltasten verschieben (Umschalt: 10 %).

Farbe des Stopps

Position %

Deckkraft %

Winkel °

.border-image {
	border: 12px solid;
	border-image: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%) 1;
}

So funktioniert border-image

border-image ersetzt den normalen Rahmen durch ein Bild oder einen Verlauf. Das Bild wird per Slice in neun Felder geteilt: Die vier Ecken landen in den Rahmenecken, die vier Kanten werden entlang der Seiten gestreckt oder gekachelt.

Eigenschaft	Bedeutung
`border-image-source`	Bild oder Verlauf
`border-image-slice`	Wo das Bild zerschnitten wird
`border-image-width`	Breite des Bildrahmens
`border-image-outset`	Wie weit der Rahmen nach außen ragt
`border-image-repeat`	Kanten strecken oder kacheln

Verlaufsrahmen mit abgerundeten Ecken baust du im Gradient-Border-Generator.

Häufige Fragen

Was bedeutet border-image-slice?

Slice teilt das Bild mit vier Linien in neun Felder: vier Ecken, vier Kanten und die Mitte. Ein Wert von 30 schneidet 30 Pixel von jedem Rand ab. Die Ecken landen unverändert in den Rahmenecken, die Kanten werden gestreckt oder wiederholt.

Warum funktioniert border-radius nicht mit border-image?

border-image ersetzt den Rahmen komplett, abgerundete Ecken werden dabei ignoriert. Für runde Ecken mit Farbverlauf nimm den Gradient-Border-Generator; er nutzt zwei Hintergrundebenen statt border-image.

Was ist der Unterschied zwischen repeat, round und space?

stretch zieht die Kante auf die volle Länge. repeat kachelt sie und schneidet am Ende ab. round kachelt und skaliert die Kacheln so, dass sie genau passen. space kachelt ohne Skalierung und verteilt den Rest als Lücken.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.