border-image

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

Example

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.

Syntax

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

Values

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

border-image16121511116
fill16121511156
gradient7122911154
optional_border_image_slice16121511156

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

×