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