CSS Properties

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• border-image

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.

Example:

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.

Example:

borderis {
border-image-slice: 10;
}

Border-image-width

This property is used to specify width of the border image. We can set this property to number, length and auto.

Example:

borderis {
border-image-width: 10px;
}

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.

Example:

borderis {
border-image-outset: 10px;
}

Border-image-repeat

This property is used to specify whether the border image should be repeated, rounded or stretched. We can set this property to stretch, round, repeat and space.

Example:

borderis {
border-image-repeat: repeat;
}

Border-image

Its shorthand of all other border-image property.

Syntax:

Selector {
border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;
}