O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 except table 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 extension, 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;}

Note:

As of early 2011, browser support for border-image was incomplete and inconsistent, whereas none of the related properties (e.g., border-image-source) were supported at all. They are included because browsers were expected to harmonize support by the end of 2011.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required