CSS border-image property is a short hand property. It is used in an element to set an image as the border.
border-image consists of following shorthand properties
- border-image-source : It is used to set the image path, which is used as the border.
- border-image-width : It is used to set the width of the border image.
- border-image-slice : It is used to divide the image into number of regions and to form the elements component.
- border-image-outset : It is used to set the distance between the border box and the image.
- border-image-repeat : It is used to set whether the image should be repeated or not.
To support border-image property on different browsers we need to add some prefixes, they are
- -webkit- : It supports chrome, safari and new version of opera
- -moz- : It support Firefox.
- -o- : Old versions of opera.
- -ms- : Internet explorer.
In the above example values used in border-image property are,
url(flower.jpg) - border-image-source
450 - border-image-width
space - border-image-repeat