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.
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:
- 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.
- border-image-slice teilt das Rahmenbild in neun Bereiche: vier Ecken, vier Strecken zwischen den Ecken und eine Mitte
- border-image-width Breite des Rahmens
- 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: 40px solid tomato; // Breite des Rahmens und
// Alternative für Browser
// ohne border-image-Unterstützung
Zwischen den Ecken wiederholen <───┐
│
border-image: url(border-image.webp) 40 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.
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).
| Autor | Titel | On-Leihe |
|---|---|---|
| Terry Pratchett | Ab die Post | 201 |
| Elisabeth von Arnim | Bezaubernder April | 88 |
| Jane Austen | Emma | 600 |
| Rebecca Gable | Das Spiel der Könige | 221 |
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.
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.
