Property border-image

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

This property is a shorthand for the following CSS properties:

Syntax

` /* source | slice */ border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */ border-image: url(“/images/border.png”) 27 space;

/* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */ border-image: url(“/images/border.png”) 27 23 / 50px 30px / 1rem round space;

/* Global values */ border-image: inherit; border-image: initial; border-image: revert; border-image: revert-layer; border-image: unset;

Values

<‘border-image-source’>
The source image. See border-image-source.

<‘border-image-slice’>
The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice.

<‘border-image-width’>
The width of the border image. Up to four values may be specified. See border-image-width.

<‘border-image-outset’>
The distance of the border image from the element’s outside edge. Up to four values may be specified. See border-image-outset.

<‘border-image-repeat’>
Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See border-image-repeat.

Formal definition

Initial value

Applies to

all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.

Inherited

No

MDN