CSS border-image-source Property

Description

The border-image-source property specifies an image to use instead of the border styles given by the border-style properties and as an additional background layer for the element.

Initial value: none
Applies to: All elements
Inherited: No
Media: Visual
Computed value: 'none' or the image with its URI made absolute
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.borderImageSource

Syntax

border-image-source: none | <image>

Values

noneborder-style is used instead.
<image>This value contains a path to an image that you want to apply to the element in question as a background image

Example

HTML

<div>Example of the border-image-source property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result