CSS/Tutorials/Boxmodell/Rahmen/border-image

Mit den Rahmenbildeigenschaften können Sie ein Bild festlegen, das – in Einzelteile zerlegt – in den Rahmenbereichen eines Elements angezeigt wird. Dieses Bild ersetzt eine „gewöhnliche“ Rahmenlinie, die mit border definiert ist und überdeckt auch den Hintergrund des Elements.

border-image

Die Eigenschaft border-image ist die Zusammenfassung der Einzelangaben border-image-source, border-image-slice, border-image-width, border-image-outset und border-image-repeat. Die Werte werden dabei mit Leerzeichen voneinander getrennt.

Browserunterstützung
caniuse.com

Beispiel ansehen …

p { padding: 2em; width: 20em; border: solid #aaa; border-width: 99px 102px; }

.stretch { border-image: url(Border-image.png) 99 102 stretch; }
.repeat  { border-image: url(Border-image.png) 99 102 repeat; }
.space   { border-image: url(Border-image.png) 99 102 space; }
.round   { border-image: url(Border-image.png) 99 102 round; }

Das Beispiel verwendet dieses Bild:

Abgeschnitten wird jeweils bei 99 Pixeln ab der Ober- und Unterkante, und bei 102 Pixeln ab der rechten und linken Kante, sodass sich die folgenden neun Teilbereiche ergeben:

Beachten Sie: Zusätzlich zu den Festlegungen von border-image muss trotzdem noch eine border-width und ein border-style:solid festgelegt werden.

border-image-source

Mit border-image-source legen Sie das Bild fest, das als Rahmenbild verwendet werden soll. Der Wert ist ein URI in der Form url(Pfad-zum-Bild), wobei Pfad-zum-Bild durch die relative oder absolute Adresse des Bildes ersetzt wird.

Browserunterstützung
caniuse.com

border-image-slice

Mit border-image-slice legen Sie fest, wie das Bild in Einzelteile zerschnitten wird. Sie können bis zu vier Werte angeben, die den Abstand des Schnitts zum jeweiligen Rand beschreiben. Erlaubt sind entweder Zahlen oder Prozentwerte.

Zahlen beziehen sich auf die internen Einheiten des jeweiligen Bildes, also Pixel bei Rastergrafiken wie PNG, JPG oder GIF, oder Vektor-Koordinaten in Vektorgrafiken wie z. B. SVG. Prozentwerte beziehen sich auf die Größe des Bildes, d. h. die Werte für oben und unten auf die Höhe und diejenigen für rechts und links auf die Breite.

Sie können einen bis vier Werte angeben. Dabei gelten folgende Regeln:

• Eine Angabe: für alle 4 Schnitte gilt derselbe Abstand
• Zwei Angaben: 1. Wert Abstand von oben und unten, 2. Wert Abstand von links und rechts
• Drei Angaben: 1. Wert Abstand von oben, 2. Wert Abstand für links und rechts, 3. Wert Abstand von unten
• Vier Angaben: 1. Wert Abstand von oben, 2. Wert Abstand von rechts, 3. Wert Abstand von unten, 4. Wert Abstand von links.

Zusätzlich kann der Wert fill angegeben werden. Dieser bewirkt, dass das mittlere Teilstück über den Hintergrund des Elements gezeichnet wird. Wenn Sie fill weglassen, wird das mittlere Teilstück verworfen.

border-image-width

Mit border-image-width können Sie den Bereich festlegen, in dem das Rahmenbild gezeichnet wird. Die Einzelteile des Bildes werden dann entsprechend skaliert.

Beachten Sie: Es muss trotzdem noch eine border-width festgelegt werden.

border-image-outset

Mit border-image-outset können Sie festlegen, wie weit das Rahmenbild aus dem eigentlichen Rahmen herausragen soll. Das Element wird dabei nicht vergrößert, sodass Überlappungen mit Nachbarelementen realisiert werden können.

border-image-repeat

Mit border-image-repeat legen Sie fest, ob und wie die vier Bildteile in den Seitenrändern wiederholt werden.

Mögliche Werte sind:

• repeat, Wiederholung, Bildteile werden nicht verändert, Einzelbilder am Anfang und Ende werden ggf. abgeschnitten
• space, Wiederholung, Bildteile werden nicht verändert, ggf. zusätzlicher Platz wird zwischen den Einzelbildern verteilt
• round, Wiederholung, Bildteile werden so in der Größe verändert, dass keines am Ende abgeschnitten wird
• stretch, keine Wiederholung, sondern Streckung.

Anwendungsbeispiele

Schmuckrahmen

Mit der border-image-Eigenschaft können Sie Bildern (und Blockelementen) einen Rahmen geben, der anstelle einer Randlinie eine externe Grafik verwendet.

Da das Zuschneiden nicht trivial ist, habe ich den Border-image Generator der MDN verwendet.

Als Gafik habe ich eine SVG-Grafik aus Wikimedia Commons verwendet:

Beispiel ansehen …

img {
  border: 5em solid;  /* muss notiert werden, um border-image darzustellen! */
}	
.schmuckrahmen {
  border-image-slice: 60 60 60 60;
  border-image-width: 5em;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch repeat;
  border-image-source: url("https://upload.wikimedia.org/wikipedia/commons/0/04/Frame.svg"); 
}

linear-Gradient als Hintergrundbild

Sie können einen Rahmen auch mit einem Farbverlauf einfärben.

Beispiel ansehen …

.rahmen_mit_verlauf {
  border-top: 2em solid #dfac20;;
  border-bottom: 2em solid #c32e04;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2em 100%;
  background-image: linear-gradient(to bottom, #dfac20 0%, #c32e04 100%), 
                    linear-gradient(to bottom, #dfac20 0%, #c32e04 100%);
}

In diesem Beispiel werden Rahmen nur oben (border-top) und unten (border-bottom) in jeweils einer Farbe festgelegt. Anstelle eines rechten und linken Rahmens wird mit background-image ein Hintergrundbild mit einem Farbverlauf verwendet, dass dann mit background-size passend skaliert wird.

Weblinks

• W3C: border-images
• MDN: Border-image Generator Dieses Werkzeug kann dazu verwendet werden, CSS3 border-image Werte zu erzeugen.
• http://www.hongkiat.com/blog/css-gradient-border/