CSS border-image Property

Description

The border-image property is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. Omitted values are set to their initial values.

Initial value
See individual properties
Applies to
All elements
Inherited
No
Media
Visual
Computed value
See individual properties
Animatable
See individual properties
CSS Version
CSS3
JavaScript syntax
object.style.borderImage

Syntax

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat> 

Values

Example

<div>Example of the border-image property</div> 
div {
   border: 1em solid blue;
   border-image: url("images/border.png") 27 round stretch;
   height: 70px;
   padding: 20px;
   margin: 20px;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
11121615116
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.418151161.0

Last updated by CSSPortal on: 12th October 2019