border-image

Values

Applicable to...

All elements except table elements that have the property border-collapse: collapse;.

Inherited

Description

Border-image is a shorthand property that defines the source, cutting pattern, border-width, directional angle and repetition of an image-based border. Note that the syntax for this property is a bit different from other CSS properties: for example you have to separate 3 of the 5 possible values with slashes and you have to list them in a specific order. There is a great tutorial about border-image on CSS-Tricks.com: http://css-tricks.com/understanding-border-image/.

Examples

body .box{
border-image: url(image.png) 3px repeat;
}
div#border{
border-image: url(otherborder.png) 20px stretch round;
}

Compatibility

Chrome	Firefox	Internet Explorer	Opera	Safari
7.0+ (-webkit-)	3.5+ (-moz-)	11+	10.5+ (-o-)	3.0+ (-webkit-)