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-slice

Values:

[<number> | <percentage>]{1,4} && fill?

Initial value:

100%

Applies to:

All elements except table elements where border-collapse is collapse

Inherited:

No

Percentages:

Refer to the size of the border image

Computed value:

Same as declared value

Description:

Defines “slice distances,” which are offsets from the top, right, bottom, and left edges of the border image. Taken together, they divide the image into nine regions, which correspond to the eight segments of the element’s border (four corners and four sides) and the element’s background area.

In cases where two opposite regions combine to exceed the total of the dimension they share, both are made completely transparent. For example, if the top slice offset value is 10 and the bottom slice offset value is 20, but the source image is only 25 pixels tall, the two exceed the height of the image. Thus, both the top and bottom segments of the border will be entirely transparent. The same holds for right and left slices and width. Corners are never forcibly made transparent, even in cases where their slices may overlap in the source image.

Examples:

div.starry {border-image-slice: 5px;}
aside {border-image-slice: 100 50 150;}

Note:

As of early 2011, browsers did not support border-image-slice. It is included because border-image (which encompasses border-image-slice) was supported and browsers were expected to add border-image-slice 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