CSS border-image Property

CSS border-image property is used to set an image as an element’s border. It is a shorthand of the below five properties:

The example below sets the image ‘border-diamonds.png’ around the <div> element as a border.

Example:

div{
  border-image: url(images/border-diamonds.png) 30 round;
}

Note: If any of the border-image property’s value is omitted, its default value is used.


CSS Syntax

The border-image property has the below syntax:

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat|initial|inherit;

Property Values

The border-image property accepts the following values:

border-image-sourceSpecifies the source/location of the image to be used as border.
border-image-sliceSpecifies how the image should be sliced. The image is always sliced into 9 sections: 4 corners, 4 edges, and one middle section.
border-image-widthSpecifies the width of the image border.
border-image-outsetSpecifies the distance between the element’s border box and the border image.
border-image-repeatSpecifies how the sliced image should be tiled and scaled to fill the image border.
initialSets the border-image property to its default value.
inheritInherits the border-image property from the parent element.

General Info

Default Valuenone 100% 1 0 stretch
InheritedNo
JavaScript Usageelement.style.borderImage = “url(images/border-diamonds.png) 30 round”;

Related Pages

CSS Tutorial: CSS Borders