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.

Syntax:

CSS3 border-image property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

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.

Specifications

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 object.style.borderImage="url(image.png) 40 40 round "
Inherited No
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.