Home » CSS border-image property

CSS border-image property

by Online Tutorials Library

CSS border-image property

This CSS property defines an image to be used as the element’s border. It draws an image outside the element and replaces the element’s border with the corresponding image. It is an interesting task to replace the border of an element with the image.

The border-image property can be applied to all elements except the elements of the internal table (such as tr, th, td) when border-collapse is set to collapse.

It is the shorthand property for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. We can set all these properties at once using the border-image property. If any of the values are not specified, then they set to their default values. The default value of this property is:

Syntax

The values of this property are tabulated as follows.

Values Description
border-image-source: It specifies the source of the border-image. It sets the path of the image, or we can say that it specifies the location of the image to be used as the border.
border-image-slice: It is used to divide or slice the image, which is specified by the border-image-source property. The values of this property specify how to slice the image for creating the pieces of the border. This property divides the image into nine sections that are:
  • Four corners
  • Four sides, and
  • a center region

It can accept four unitless positive values. Its default value is 100%.

border-image-width: It sets the width of the border-image. It can accept a unitless positive value, a percentage value, or the keyword auto. Its default value is 1. We can specify up to four values for providing the width of individual sides.
border-image-outset: It sets the amount of space by which the border image is set out from its border box.
border-image-repeat: It controls the repetition of the image to fill the area of the border. We can specify up to two values for this property. If we specify one value, then it is applied on both vertical and horizontal sides. But if we specify two values, then the first value is applied on horizontal sides, and the second value is applied on vertical sides.
The values of this property are listed below.
  • stretch
  • repeat
  • round
  • space

The default value of this property is stretch.

Initial It sets the property to its default value (border-image: none 100% 1 0 stretch ).
inherit It inherits the property from its parent element.

Now, let’s see some of the examples to understand how to set the border-image using the border-image property.

Example

In this example, we are replacing the border of the paragraph elements with the image. In the first paragraph, we are specifying the single value (i.e., round) of the border-image-repeat property, whereas in the second paragraph, we are specifying two values (round, stretch) of it, the first value for the horizontal sides and second value for the vertical sides.

Test it Now

Output

CSS border-image property

We can also specify the gradient as the border image.

Example – using linear-gradient

In this example we are using the linear-gradient and repeating-linear-gradient as the border image of the paragraph elements.

Test it Now

Output

CSS border-image property

Example – using radial-gradient

In this example, we are using the radial-gradient as the border image of the paragraph elements.

Test it Now

Output

CSS border-image property


You may also like