Menu Home

border-image-slice

osbo.com | CSS | Properties | border-image-slice

The border-image-slice CSS property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.

The middle is discarded (treated as fully transparent) unless the fill keyword is present.

Syntax

CSS

border-image-slice: value;

JS

object.style.borderImageSlice = "value";

Values

<'border-image-slice'> = [<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

fill

Causes the middle part of the border-image to be preserved.

Initial

100%

Examples

fill

number

percentage

JS

Internal

border-image

border-image-outset

border-image-repeat

border-image-source

border-image-width

External

World Wide Web Consortium (W3C)