• 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; }

The post How to use Border Image Property in CSS? appeared first on scmGalaxy.