Its shorthand of all other border-image property.
- border-image
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
Border Image–
Syntax: –
Selector {border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat; }
Ex:-
#borderis {border-image: url(border.png) 10 round;}
border-image-source-
This property is used to specify source of image which is used as border. We can set this property to none or image.
Ex:-
#borderis { border-image-source: none; }
#borderis { border-image-source: url(border.png); }
If the value is “none” or if the specified image can not be found, the border styles will be used.
border-image-slice-
This property is used to specify how to slice the image specified by border-image-source property. The image is always sliced into nine sections: four corners, four edges and the middle. The “middle” part is treated as fully transparent, unless the fill keyword is set. We can set this property to number, % and fill.
Ex:-
#borderis { border-image-slice: 10; }
#borderis { border-image-slice: fill); }
border-image-width-
This property is used to specify width of the border image. We can set this property to number, length and auto.
Ex:-
#borderis { border-image-width: 10; }
#borderis { border-image-width: 10px; }
#borderis { border-image-width: 10%; }
#borderis { border-image-width: auto; }
border-image-outset-
This property is used to specify the amount by which the border image area extends beyond the border box. We can set this property to number and length.
Ex:-
#borderis { border-image-outset: 10; }
#borderis { border-image-outset: 10px; }