Chapter 6 - Border Images - 6.2 Image Slicing: the ‘border-image-slice’ property
Go to the relevant page of the specification.
- border-image-slice-001 (image)
-
border-image-slice -
Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red. - border-image-slice-002 (image)
-
border-image-slice -
Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red. - border-image-slice-003 (image)
-
border-image-slice - border-style: none
If 'border-style' is not declared, then it defaults to 'none' in which case the computed border-widths on all 4 sides is 0 in which case the border area to be painted with the border-image is also 0 because the default border-image-width is 1 which means 1 time the computed border-width. So, we should see no red in this test. - border-image-slice-005 (image)
-
The 'border-image-slice' property with four percentage values
This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. - border-image-slice-007 (image)
-
The 'border-image-slice' property with the 'fill' keyword
This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved. - border-image-2
-
CSS Border and Background: border-image #2 border-image-slice
Basic support for the border-image-slice property - border-image-3
-
CSS Border and Background: border-image #3 border-image-slice
Support for the fill keyword on the border-image-slice property - border-image-4
-
CSS Border and Background: border-image #4 border-image-slice
Support for percentage with the border-image-slice property - border-image-5
-
CSS Border and Background: border-image #5 border-image-slice
Negative values for the the border-image-slice property should not be supported - border-image-6
-
CSS Border and Background: border-image #6 border-image-slice
The border-image-slice property default value is 100%