CSS property: border-image

Description

Specifies an image to use instead of the border styles given by the border-style properties and an additional background image for the element.

Syntax

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

Parameters

<border-image-source>
Syntax: none | <image>
<border-image-slice>
Syntax: [ <number> | <percentage> ]{1,4} && fill?
<border-image-width>
Syntax: [ <length> | <percentage> | <number> | auto ]{1,4}
<border-image-outset>
Syntax: [ <length> | <number> ]{1,4}
<border-image-repeat>
Syntax: [ stretch | repeat | round ]{1,2}

Syntax

Versions

Examples

h1 {
    border-image: url("border.png") 25;
    border: solid 25px #f00;
}
p {
    border-image: url("border.png") 5 10 5 10 repeat;
    border: solid 10px #f00;
}