CSS Border Image

« Previous Tutorial Next Tutorial »

The border-image

The border-image property enables you to insert images in border edges and border corners. These properties do not affect the layout of a box and its content.

CSS Border Image Properties

The border-image properties include the following properties, describes in the table given here:

border-image-source Specifies an image to be used as a border
border-image-slice Specifies the inward offsets of the image-border
border-image-width Specifies the widths of the image-border
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the image-border should be repeated, rounded, or stretched
border-image Specifies a shorthand property for setting all the border-image properties

CSS border-image-source

The border-image-source specifies an image instead of using a border style. If the value is none, the specified border styles will be used.

The syntax to use the border-image-source property is given as follows:

border-image-source: none | <image> ;

CSS border-image-slice

The border-image-slice specifies inward offsets from the top, right, bottom, and left edges of an image. The image is divided into nine regions : four corners, four edges, and middle.

The syntax to use the border-image-slice property is given as follows:

border-image-slice: [<number> | <percentage>]{1,4} && fill? ;

In the preceding syntax, <number> represents pixels in the image, <percentage> is related to the size of the image, and the fill keyword represents that the middle part of the border-image is preserved.

CSS border-image-width

The border-image-width specifies the width of an image used for the border.

The syntax to use the border-image-width property is given as follows:

border-image-width: [ <length> | <percentage> | <number> | auto }{1,4};

In the preceding syntax, <length> specifies the length of an image, <percentage> specifies the size of the border image area, <number> represents multiples of the corresponding border-width, and the auto keyword specifies the default available size for the image.

CSS border-image-outset

The border-image-outset specifies the value for the border image area that can be extended beyond the border box on the top, right, bottom, and left sides, respectively.

The syntax to use the border-image-outset property is as follows:

border-image-outset: [ <length> | <number> ]{1,2};

CSS border-image-repeat

The border-image-repeat specifies that the images for the sides and the middle part of the border image are scaled and tiled.

The syntax to use the border-image-repeat property is given as follows:

border-image-repeat: [ stretch | repeat | round }{1,2};

CSS border-image shorthand

The border-image specifies a shorthand property to set the border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test