Border-image maakt het mogelijk om afbeeldingen als rand te gebruiken. Het is hoger in rang dan de border-style en zal deze dan dus opheffen. Je kunt de border-style dan gebruiken voor het geval de browser de border-image niet ondersteund.Borderimage is een shorthand en heeft de volgende standaard waarden:
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;De afbeelding kan worden gesliced in 4 lengte waarden: top, right, bottom, left. Hierdoor onstaat er een grid van 9 vlakken. De 4 hoeken, de 4 zijden en het midden.
photo_frame_15bMocht het nodig zijn dan word de afbeelding geschaaltAls je een border image gebruikt worden de dimensies van de afbeelding geschaald als de zijden worden verkleind of vergroot
frame3b

Op dit moment wordt de shortcut beter ondersteund dan de afzonderlijke properties.
Niet alle browsers kunnen terug vallen op de border style als de afbeelding niet aanwezig is.

Zie ook:
http://border-image.com/
http://www.w3.org/TR/css3-background/#border-images

Browsers ie7y[1] mozilla-firefox_16_0_1[1] _safari-icon[1] _opera-icon[1] imgChrome
Versions Onbekend 15 6.0 -o- 16