CSS3 border-image Property


Specify an image as the border around a <div> element:

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

Try it yourself »

More "Try it Yourself" examples below.

Definition and Usage

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Omitted values are set to their default values.

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

Default value: none 100% 1 0 stretch
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.borderImage="url(border.png) 30 30 round" Try it

Browser Support

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

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

border-image  16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
3.1 -webkit-
11.0 -o-

Note: See individual browser support for each value below.

CSS Syntax

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

Property Values

Value Description Play it
border-image-source The path to the image to be used as a border
border-image-slice The inward offsets of the image-border
border-image-width The widths of the image-border
border-image-outset The amount by which the border image area extends beyond the border box
border-image-repeat Whether the image-border should be repeated, rounded or stretched Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


More Examples

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

Related Pages

CSS3 tutorial: CSS3 Borders

CSS Reference: border-image-outset property

CSS Reference: border-image-repeat property

CSS Reference: border-image-slice property

CSS Reference: border-image-source property

CSS Reference: border-image-width property

HTML DOM reference: borderImage property




Search w3schools.com:

Translate w3schools.com: