CSS border-image attribute

Definition and Usage

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

If the value is omitted, the default value will be set.

Tip:Please use the border-image-* properties to construct beautiful scalable buttons!

See Also:

CSS3 Tutorial:CSS3 Borders

Example

Define the image as the border that surrounds the div element:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Try It Yourself

More examples are at the bottom of the page.

CSS Syntax

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

Property Value

Value Description Test
border-image-source The path of the image used in the border.
border-image-slice The inward offset of the image border.
border-image-width The width of the image border.
border-image-outset The amount of the border image area that extends beyond the border.
border-image-repeat Whether the image border should be tiled (repeated), filled (rounded), or stretched (stretched). Test

Technical Details

Default Value: none 100% 1 0 stretch
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderImage="url(border.png) 30 30 round"

More Examples

Border-image Button
This example demonstrates how to create a button using the border-image property.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-