HTML and CSS Reference
In-Depth Information
Name
border-image
Values:
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'>? [ / <'border-
image-outset'> ]? ]? || <'border-image-repeat'>
Initial value:
See individual properties
Applies to:
All elements excepttable elements where border-collapse is collapse
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the source, slicing pattern, border width, degree of exten-
sion, and repetition of an image-based border. The syntax is somewhat unusual compared to
the rest of CSS, so take extra time with it. For example, three of the five values possible are
slash-separated and must be listed in a specific order.
Note that it is effectively impossible to take a simple image (say, a star) and repeat it around
the edges of an element. To create that effect, you must create a single image that contains
nine copies of the image you wish to repeat in a 3×3 grid. It may also be necessary to set
border-width (not border-image-width ) to be large enough to show the image, depending
on the value of border-image-outset .
Examples:
div.starry {border-image: url(stargrid.png) 5px repeat;}
aside {
border-image: url(asides.png) 100 50 150 / 8 3 13 /
2 stretch round;}
Search WWH ::




Custom Search