CSS Property border-image

The border-image property is a shorthand property for the following properties:

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

The omitted values will be set to their default values.

Summary

Initial value: none 100% 1 0 stretch
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.borderImage="url(border.png) 50 50 round"
Animatable: no

CSS Syntax

border-image: source slice width outset repeat|initial|inherit;

Property Values

border-image-source: the image URL
border-image-slice: how to slice the image
border-image-width: image-border widths
border-image-outset: sets by which amount the border image area extends beyond the border box.
border-image-repeat: sets Whether the image-border should be repeated, rounded or stretched

Browser compatibility


`border-image`	Yes	11.0	Yes	6.0 (3.1 -webkit-)	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   w  ww.j  ava  2s  .  co  m-->
    border: 15px solid transparent;
    width: 250px;
    padding: 10px 20px;
}

#round {
    -webkit-border-image: url(http://java2s.com/style/demo/border.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(http://java2s.com/style/demo/border.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(http://java2s.com/style/demo/border.png) 30 30 round;
}

#stretch {
    -webkit-border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch; /* Opera 11-12.1 */
    border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div><br>
<div id="stretch">Here, the image is stretched to fill the area.</div>

<p>Here is the image used:</p>
<img src="http://java2s.com/style/demo/border.png">

</body>
</html>

Click to view the demo