mozilla
Your Search Results

    border-image-slice

    Summary

    The border-image-slice CSS property divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.

    The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesFour values control the position of the slice lines. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

    The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).

    The border-image-repeat, border-image-width, border-image-outset properties define how these images will be used.

    The shorthand CSS property border-image may reset this property to its default value.

    • Initial value 100%
    • Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
    • Inherited no
    • Percentages refer to the size of the border image
    • Media visual
    • Computed value one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
    • Animatable no
    • Canonical order the percentages or lengths, eventually followed by the keyword fill

    Syntax

    Formal syntax: [<number> | <percentage>]{1,4} && fill?  
    /* border-image-slice: slice */
    border-image-slice: 30%; 
    
    /* border-image-slice: horizontal vertical */
    border-image-slice: 10% 30%;
    
    /* border-image-slice: top vertical bottom */
    border-image-slice: 30 30% 45;
    
    /* border-image-slice: top right bottom left */
    border-image-slice: 7 12 14 5; 
    
    /* border-image-slice: … fill */
    /* The fill value can be placed between any value */
    border-image-slice: 10% fill 7 12;
    
    border-image-slice: inherit;
    

    Values

    slice
    Is a <number> or a <percentage> of the offset for the four slicing lines. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    horizontal
    Is a <number> or a <percentage> of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    vertical
    Is a <number> or a <percentage> of the offset for the two vertical slicing lines, the right and the left ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    top
    Is a <number> or a <percentage> of the offset for the top slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    bottom
    Is a <number> or a <percentage> of the offset for the bottom slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    right
    Is a <number> or a <percentage> of the offset for the right slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    left
    Is a <number> or a <percentage> of the offset for the left slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
    fill
    Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
    inherit
    Is a keyword indicating that all four values are inherited from their parent's element calculated value.

    Examples

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-image-slice' in that specification.
    Candidate Recommendation Initial specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 15.0 15.0 (15.0) 11 15 6
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 15.0 (15.0) Not supported ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, kscarfone, jsx, ethertank, trevorh, OoOoOoOo, teoli, LouisLazaris, hecnatur
    Last updated by: jsx,