CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS3 border-image-source attribute CSS3 border-image-repeat attribute

CSS3 border-image-Usage and examples of the slice property

border-image-The slice CSS property willborder-image-sourceThe specified image is divided into9region: four corners, four sides, and a center. It does this by specifying4An inward offset to achieve this, which usually creates a3×3grid.

The middle part of the boundary image will be discarded and not used by the boundary itself, butbackground-imageIf the fill keyword appears, it is used as a background image.

The following table describes the usage and version history of this attribute, as well as the syntax for using it in JavaScript scripts.

Default value:	100%
Applies to:	This attribute can be applied to any element, but when it comes to table elements (such as tr, th, td), the border-When the collapse attribute value is collapse, border-image-slice attribute is invalid. It also applies to::first-letter.
Inheritance:	None
Animatable:	No.Please see Animation attributes.
Version:	CSS3new feature
JavaScript syntax:	object.style.borderImageSlice="60% 60%"

border-image-slice usage syntax

The syntax of this attribute is as follows:

border-image-slice: [ number | percentage ]　1　to　4　values | fill | initial | inherit

The following example demonstrates how to use border-image-slice attribute.

Example

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px solid transparent;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

Test and see‹/›

Attribute Value

The following table describes the value of this attribute.

Value	Description
number	For raster images, it represents the distance of the image (in pixels), for vector images, it represents vector coordinates.
percentage	Relative to the size of the image: the width of the image offset horizontally, the height of the image offset vertically.
fill	If present, retain the middle part of the image. Otherwise, consider the middle as transparent.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element border-image-Calculation value of slice attribute.

Browser Compatibility

border-image-Browser compatibility of slice attribute, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+