Example
With the border-image property you have the possibility to set an image to be used instead of normal border styles.
A border-image essentially consist of a
border-image-source: The path to the image to be usedborder-image-slice: Specifies the offset that is used to divide the image into nine regions (four corners, four edges and a middle)border-image-repeat: Specifies how the images for the sides and the middle of the border image are scaled
Consider the following example wheras border.png is a image of 90x90 pixels:
border-image: url("border.png") 30 stretch;
The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners of the border while the side will be used in between. If the element is higher / wider than 30px this part of the image will be stretched. The middle part of the image defaults to be transparent.
