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

<div>Example of the border-image-source property</div>
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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
11121515156
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤371815?6?