Search within TutorialsPark

CSS3 border-image Property

To draw an image on the borders of the element

Definition and Notes.

1. The CSS border-image is shorthand property to set the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat in a single declaration

2. Its not possible to take a single image and repeat it around the border of the element. Hence you create a single image that contains nine copies of the image you wish to repeat in a 3*3 grid.


CSS3 border-image property. internetexplorer safari firefox opera chrome

View in Splitscreen»


Note-The border-width must be large enough to show the image in the borders.

Property Values

Value Description
border-image-source Specifies the source for the border image.
border-image-slice Specifies the offset for the image slices.
border-image-width To set the width of the image border
border-image-outset To Specify the area outside the border box that will be used to display the image.
border-image-repeat Specifies the repeat style for the border image.


Specs Value
Name border-image
Value <border-image-source> || <border-image-slice> [ / <border-image-width> ? [ / <percentages>]?]? || <border-image-repeat>
Initial Value See Individual Properties
Applies to All Elements except table elements where border-collapse is collapse
Javascript syntax"url(image.png) 40 40 round "
Inherited No
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.