Easy Tutorial
❮ Sel Attr End Sel Element Element ❯

CSS3 border-image Property

Example

Specifies the image to be used as the border around a div element:


Browser Support

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

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

Property Chrome IE Firefox Safari Opera
border-image 16.0 <br>4.0 -webkit- 11.0 15.0 <br>3.5 -moz- 6.0 <br>3.1 -webkit- 15.0 <br>11.0 -o-

Property Definition and Usage

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

Omitted values are set to their default values.

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

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

Syntax

border-image: source slice width outset repeat|initial|inherit;
Value Description
border-image-source Specifies the path to the image to be used as the border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the width of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded, or stretched

More Examples

Image Button


Related Articles

CSS3 Tutorial: CSS3 Borders

❮ Sel Attr End Sel Element Element ❯