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

• <border-image-source>See border-image-source CSS property for values.
• <border-image-slice>See border-image-slice CSS property for values.
• <border-image-width>See border-image-width CSS property for values.
• <border-image-outset>See border-image-outset CSS property for values.
• <border-image-repeat>See border-image-repeat CSS property for 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
11	12	16	15	11	6
Tablets / Mobile
4.4	18	15	11	6	1.0

Last updated by CSSPortal on: 12th October 2019