The border-image-slice
CSS property divides the image specified by border-image-source
into regions. These regions form the components of an element's border image.
The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.
The above diagram illustrates the location of each region.
fill
is set.The border-image-repeat
, border-image-width
, and border-image-outset
properties determine how these regions are used to form the final border image.
/* All sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12 14 5; /* Using the `fill` keyword */ border-image-slice: 10% fill 7 12; /* Global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset;
The border-image-slice
property may be specified using one to four <number-percentage>
values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to 100%
.
The optional fill
value, if used, can be placed anywhere in the declaration.
<number>
<percentage>
fill
background
. Its width and height are sized to match the top and left image regions, respectively.<number-percentage>{1,4} && fill?where
<number-percentage> = <number> | <percentage>
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-slice' in that specification. | Candidate Recommendation | Initial defintion |
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 |
Animation type | discrete |
Canonical order | the percentages or lengths, eventually followed by the keyword fill
|
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 15 | 12 | 15
|
11 | 15 | 6 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4.1
|
? | Yes | 15
|
? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice