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


Initial value as each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretch
Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.


border-image: url("/static/images/bg.png") 50;


The source image. See border-image-source.
The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice.
The width of the border image. Up to four values may be specified. See border-image-width.
The distance of the border image from the element's outside edge. Up to four values may be specified. See border-image-outset.
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.

Browser support


We use cookies to improve your experience. Learn more in our Privacy policy.