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
11	12	15	15	15	6
Tablets / Mobile
4.4	18	15	14	6	1.0

Last updated by CSSPortal on: 12th October 2019