CSS3 Border image property is used to apply image on the border of the Html element instead of the normal border. Image on Border can be apply using css3 border-image property.

The property has three parts:
1. The image to use as the border.
2. Where to slice the image.
3. Define whether the image should be repeated or stretched.

Property	Description
border-image	Use to specify an image in a border border-image: url(img.png) 30 round;
border-image-source	specifies the path to the image to be used as a border border-image-source: url(border.png);
border-image-slice	specifies how to slice the image The border-image-slice property can take from one to four values. border-image-slice: 30; border-image-slice: 30 fill;
border-image-width	The border-image-width property specifies the width of the border image. border-image-width: 10px;
border-image-outset	specifies the amount by which the border image area extends. The border-image-outset property can take from one to four values. border-image-outset: 10px;
border-image-repeat	Whether the border image should be repeat, round or stretch. Default is stretch border-image-repeat: repeat;

Example 1: Border-Image
Image use as a Border:

Output:

Example 2: Border-Image
Image use as a Border:

Output:

Example 3: Border-Image
Image use as a Border:

Output:

Exercise 1:
Image use as a Border:

Exercise 2:
Image use as a Border: