CSS Border Image Property

The CSS border-image property specifies how an image is to be used in place of the border styles.

It is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties at once.

border-image-source

The border-image-source CSS property is used to set the location of the image to be used for the border, instead of the border styles given by the border-style propertiey.

Example:

#image-border {

border: 8px solid transparent;

padding: 10px;

border-image-source: url("border-image.jpg");

border-image-slice: 40;

}

border-image-slice

The border-image-slice property is used to divide or slice an image specified by the border-image-source property. The image is always divide or sliced into nine sections: four corners, four edges and the middle.

Example:

#image-border {

border: 8px solid transparent;

padding: 10px;

border-image-source: url("border-image.jpg");

border-image-slice: 20%;

}

border-image-width

The border-image-width property is used to set the width of the border image.

Example:

#image-border {

border: 8px solid transparent;

padding: 10px;

border-image-source: url("border-image.jpg");

border-image-slice: 20%;

border-image-width: 20px;

}

border-image-outset

The border-image-outset property defines the amount by which the border image area extends beyond the border-box.

Example:

#image-border {

border: 8px solid transparent;

padding: 10px;

border-image-source: url("border-image.jpg");

border-image-slice: 20%;

border-image-width: 20px;

border-image-outset: 20px;

}

border-image-repeat

The border-image-repeat property is used to set the repeated, rounded or stretched the border image.

Example:

#image-border {

border: 8px solid transparent;

padding: 10px;

border-image-source: url("border-image.jpg");

border-image-slice: 20%;

border-image-width: 20px;

border-image-outset: 20px;

border-image-repeat: repeat;

}

border-image Shorthand Property

Example:

#image-border {

border: 10px solid transparent;

padding: 20px;

border-image: url(border-image.jpg) 30 repeat;

}

initial

The initial value is used to set border-image property to its default value.

inherit

The inherit value is used to set border-image property from its parent.

CSS border-image with different slice values

Example:

#image-border1 {

border: 8px solid transparent;

padding: 20px;

border-image: url(border-image.jpg) 40% round;

}

#image-border2 {

border: 8px solid transparent;

padding: 20px;

border-image: url(border-image.jpg) 25% round;

}

#image-border3 {

border: 8px solid transparent;

padding: 20px;

border-image: url(border-image.jpg) 10% round;

}

You Are Here

CSS Border Image Property

border-image-source

Example:

border-image-slice

Example:

border-image-width

Example:

border-image-outset

Example:

border-image-repeat

Example:

border-image Shorthand Property

Example:

initial

inherit

CSS border-image with different slice values

Example:

Ask a Question Cancel reply