border-image-source property

Specifies the location of the image to be used for the border.

CSS Backgrounds and Borders Module Level 3, Section 6

Syntax

border-image-source: none | <image>

Property values

One of the following values:

none: Initial value. This value adds an image layer but draws nothing.
image: Location of the border image, in the form "url(sUrl)" where sUrl is an absolute or relative URL.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS Backgrounds and Borders Module Level 3, Section 6

Remarks

If the value is none, or if the image is not found, then Internet Explorer will fall back to the computed value of border-style.

Examples

In the CSS below, the path to a custom image, "border.png", is specified for border-image-source. After setting border-image-slice to 30 pixels, the element will look like the following image.

An HTML element with an image defined for border-image-source.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
}