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.
Schmuckrahmen aus Pixelbildern oder SVG-Grafik
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
Die Kurzschrift border: none entfernt das border-image wieder.
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.
Aus der Zeit gefallen
Die Schmuckrahmen mit border-image wirken heute in der Zeit der eher spartanischen sparsamen und gradlinigen Designs eher altbacken. border-radius wirkt nicht bei border-image. box-shadow wirkt zwar, aber nur auf die Form des border-image – also immer mit geraden Kanten, auch wenn das border-image transparente Bereiche hat.
