CSS border-image

CSS border-image

border-image baut das altgediente border zu einem flexiblen Schmuckrahmen aus. Dafür braucht CSS border-image ein einziges Pixelbild, in dem alle Bereiche des Rahmen liegen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Schmuckrahmen aus Pixelbildern

Mit CSS border-image entstehen Schmuckrahmen aus Bitmaps, die sich an die Größe des HTML-Blocks anpassen, wenn z.B. Texte länger oder Bilder größer oder kleiner werden. Das Zusammensetzen eines Rahmens, der seine Größe dynamisch ändern kann, ist nicht trivial und dafür muss ordentlich gerechnet werden.

Anders als background-image ist border-image kein einzelnes Bild, sondern ist in neun Bereiche geteilt. Der Browser würde ein einzelnes Bild nur in den vier Ecken wiederholen.

Der Browser unterteilt das Bild mit border-image-slice für border-image per Vorgabe in neun Quadrate.

Beispiel border-image Einteilung
border-image eingeteilt in 9 gleich große Bereiche

Die klassische Angabe von border (mindestens border-width) muss zusätzlich definiert werden.

.border {
	border: 30px solid blue;
	border-image-source: url(border-nine.png);
	border-image-slice: 33%;
}

Die Box mit dem Rahmen kann jetzt in jede Richtung wachsen und bleibt scharf und sauber.

source, slice, width, repeat

border-image setzt sich aus vier Komponenten zusammen:

  1. border-image-source: das Bild, ein Verlauf oder eine SVG-Grafik für den Rahmen. Nur ein einziges Bild, ein Verlauf oder eine Grafik wird benutzt; das Bild wird also nicht in Slices unterteilt.
  2. border-image-slice teilt das Rahmenbild in neun Bereiche: vier Ecken, vier Strecken zwischen den Ecken und eine Mitte
  3. border-image-width Breite des Rahmens
  4. border-image-repeat Wie der Browser das Bild auf der Strecke zwischen den Ecken behandeln soll
  • border-image-source || border-image-slice
  • border-image-width
  • border-image-repeat || border-image-outset

Die Kurzschrift border: none entfernt das border-image wieder.

Für Browser, die border-image nicht unterstützen (IE bis einschließlich IE10) setzt man am besten border: XXpx solid #4e8a9d vor die border-image-Eigenschaft.

border-image kann nicht zusammen mit border-radius eingesetzt werden.

Variationen

border-image mit 9 Bereichen
Rahmenbild für border-image mit den 9 Bereichen.
border-image: url(border.webp) 40 repeat;
border-image: url(border.webp) 40 stretch;
border-image: url(border.webp) 40 round;
border-image: url(border.webp) 40 space;
border: 10px solid blue; // Breite des Rahmens und
                         // Alternative für Browser 
                         // ohne border-image-Unterstützung

           Bild zwischen den Ecken wiederholen <---+
                                                   |
border-image: url(border-image.webp) 10 10 20 10 repeat;
                     |              |    
                     |              | 
                     |              +----> Breite des Rahmens
                     |                  
                     +----> URL des Bildes

Die Breite des Rahmens wird in Pixeln oder Prozentwerten angegeben. Vorsicht: Wenn die Breite in Pixeln notiert wird, dann ohne »px«. Prozentwerte werden mit »%« geschrieben.

Der Browser setzt die Ecken der border-image-Bitmap immer in die Ecken der HTML-Box.

Die dritte Regel des CSS-Stils weist den Browser an, wie er in den Strecken zwischen den Ecken vorgehen soll: repeat, round, space oder stretch.

  • Bei repeat soll der Browser das Bild zwischen den Ecken wiederholen,
  • mit round soll das Bild so eingepasst werden, dass immer ganze Kacheln des Bildes in die Strecke zwischen den Ecken passen. Dafür muss das Bild u.U. gestreckt werden,
  • space verteilt ganze Bilder auf den Raum zwischen den Ecken und füllt ev. bleibenden Platz mit Leerraum (?),
  • border-image stretch dehnt das Bild über die gesamte Breite der Strecke zwischen den Ecken.

border-image Demo

.foo { padding: 10px; border-image: url(frame.png) 40 round}

Als es klingelte nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Aus Edward Gorey: Der zweifelhafte Fremde

border-image bei HTML table

border-image kann mit jedem HTML-Element verwendet werden. Bei HTML table mit border-collapse greift border-image nicht (border-collapse: separate setzt border-collapse zurück).

AutorTitelOn-Leihe
Terry PratchettAb die Post201
Elisabeth von ArnimBezaubernder April88
Jane AustenEmma600
Rebecca GableDas Spiel der Könige221
table {
	border-width: 15px;
	border: 15px solid rgb(194,213,180);
	padding: 10px;
	border-image: url(frame.webp) 15 round;
	border-collapse: separate;
}

border-image mit gradient

Was als background-image funktioniert, funktioniert auch als border-image: linear-gradient als border-image.

.lg { border-image: linear-gradient(0deg, cornflowerblue 0%, wheat 50%) 15 repeat}

Sonntags wirkte er mürrisch und auch leicht irr, denn er aß nicht nur Toast sondern Tafelgeschirr.

border-image mit SVG

Alle Browser unterstützen SVG als border-image.

.floral {  
   border-width: 40px; 
   border: 40px solid rgb(194,213,180); 
   padding: 5px; 
   border-image: url(floral.svg) 33% round
}

Es beliebte bisweilen ihm im Kamin seine schneeweißen Segeltuchschuh auszuziehen.

SVG Remix von GDJ openclipart

Browser-Unterstützung

border-image braucht keinen Browser-Präfix mehr, aber Internet Explorer interpretiert border-image erst in Version 11.

Safari unterscheidet noch nicht zwischen round und repeat: Das Bild wird ohne jedliche Skalierung wiederholt und u.U. beschnitten, damit es sich in die Strecke zwischen den Ecken einpasst.