Your Search Results

    border-image

    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 the concatenation of the initial values of its longhand properties:
      • border-image-source: none
      • border-image-slice: 100%
      • border-image-width: 1
      • border-image-outset: 0s
      • border-image-repeat: stretch
    • Applies to as each of the properties of the shorthand:
      • border-image-outset: all elements, except internal table elements when border-collapse is collapse
      • border-image-repeat: all elements, except internal table elements when border-collapse is collapse
      • border-image-slice: all elements, except internal table elements when border-collapse is collapse
      • border-image-source: all elements, except internal table elements when border-collapse is collapse
      • border-image-width: all elements, except table elements when border-collapse is collapse
    • Inherited no
    • Percentages The values of its longhand properties the percentage value belongs to:
      • border-image-slice: refer to the size of the border image
      • border-image-width: refer to the width or height of the border image area
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • border-image-outset: all lengths made absolute, otherwise as specified
      • border-image-repeat: as specified
      • border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
      • border-image-source: none or the image with its URI made absolute
      • border-image-width: all lengths made absolute, otherwise as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    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 in:
    border image repeat demo

    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 in:
    border image round demo

    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 in:
    border image stretch demo

    Specifications

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

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support

    3.5 (1.9.1)-moz [1]

    Without prefix since 15 (15)

    7.0-webkit

    Without prefix since 16.0

    11

    10.5 / 11.0-o [2]

    Without prefix since 15.0

    3.0-webkit

    Without prefix since 6.0

    optional <border-image-slice> 15 (15) ? ? ? ?
    fill keyword 15 (15) Yes ? Not supported Yes (6)
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support

    3.2-webkit

    Without prefix since 15.0 (15)

    Not supported 11.0-o 2.1-webkit
    optional <border-image-slice> 15.0 (15) Not supported ? ?
    fill keyword 15.0 (15) Not supported Not supported Yes(18)
    • [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

    Attachments

    File Size Date Attached by
    border image
    an example borderimage
    849 bytes 2012-10-10 12:47:02 Murb
    border image repeat demo
    border image repeat demo
    4002 bytes 2012-10-10 13:19:33 Murb
    border image round demo
    border image round demo
    9313 bytes 2012-10-10 13:19:45 Murb
    border image stretch demo
    border image stretch demo
    4632 bytes 2012-10-10 13:20:01 Murb
    Hide Sidebar