border-image

« CSS « CSS Reference

Summary

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.

The border-image is used instead of the border styles given by the border-style properties. It is important to note that if the computed value of border-image-source, which can be set either by border-image-source or the shorthand border-image, is none, or if the image cannot be displayed, the border styles will be used.

• Initial value border-image is a shorthand property, so it does not technically have an initial value
  but the properties for which it is shorthand have the following initial values:
  • border-image-source: none
  • border-image-slice: 100%
  • border-image-width: 1
  • border-image-outset: 0
  • border-image-repeat: stretch
• Applies to all elements, except table elements when border-collapse is collapse
• Inherited no
• Media visual
• Computed value any URI made absolute, any <length> made absolute, other parts as specified

Syntax

Formal syntax: <'border-image-source'> || 
               <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || 
               <'border-image-repeat'>

Values

See the respective properties for the different values.

Examples

Bitmap repeated (repeat)

The image is sliced and simply tiled to fill the border area.

.example { 
    border: 30px solid transparent;
    -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
    -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
    -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
    border-image:url("/files/4127/border.png") 30 30 repeat;
}

Results into:

Bitmap repeated (round)

The round option is a variation on the repeat option that distributes the tiles in such a way that the ends nicely connect.

.example { 
    border: 30px solid transparent;
    -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
    -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
    -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
    border-image:url("/files/4127/border.png") 30 30 round;
}

Results into:

Bitmap stretched

The 'stretch' option stretches the images to fill the border area.

.example { 
    border: 30px solid transparent;
    -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
    -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
    -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
    border-image:url("/files/4127/border.png") 30 30 stretch;
}

Results into:

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3	Candidate Recommendation

Browser compatibility

Notes

• [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
• [2] For Opera, the prefixed property was added after the non-prefixed.

See also

• Usage of images as border of an element: the CSS shorthand property border-image and border-image-source, border-image-width, border-image-slice, border-image-repeat, and border-image-outset.