CSS3 Border Image

CSS3 Border image property is used to add image boarder to some elements.

CSS3 Border Image-property

CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.

1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board.. We will be using this image as border

<style>#borderimg { 
    border: 15px solid transparent;
    padding: 20px;
    -webkit-border-image: url("media/CSS3 Border Image")

 the middle sections of the image are stretched to create the border:

<style>#borderimg { 
    border: 15px solid transparent;
    padding: 20px;
    -webkit-border-image: url("https://www.tutorialsart.com/tryit/media/CSS3-Border-Image.jpg") 30 stretch;

CSS3 Border values

Following are the values:

1	border-image-source This value is used to set the image path
2	border-image-slice This value is used to slice the boarder image
3	border-image-width This value is used to set the boarder image width
4	border-image-repeat This value is used to set the boarder image as rounded, repeated and stretched