border-image-slice for gradient border image

Question

I am trying to understand how border-image-slice works in the case of gradient border image. In spec it is written that a value for border-image-slice could be a number whic

Answer 1

In the next example I'm using px instead of em because I think is clearer.

This is the image used for the border image.

div{ width: 416px; height: 368px;
	background:repeating-linear-gradient(45deg, 
			#000, #000 1.5%, 
			transparent 1.5%, transparent 5%);
}

This image will be sliced in 9 squares something like a grid.

The image is from this article: border-image-slice

If the value for border-image-slice is 80 this means that the offset is 80, i.e. C1, C2, C3 and C4 size is 80/80. All C slices are used for the corners of the border image. The E1,E2,E3 and E4 are used to draw the edges.

If instead of 80 you are using 208 or 50% the border image will get corners but no edges because there is nothing left for the edges.

Next comes a demo where you can see the evolution of the slices on the image used to draw the border image. I've changed the width of the div at 300 because I wanted to see both the div with the border image and the image used for the border one next to the other. In this case the edges of the border image are disappearing at border-image-slice:150;

itr.addEventListener("input",()=>{
	let v = itr.value;
	border.style.borderImageSlice = v;
	itrspan.innerHTML = v;
	let d = `M${v},0v300M${300-v},300v-300M0,${v}h300M300,${300-v}h-300`
	thePath.setAttributeNS(null,"d",d)
})

div{display:inline-block;}

#border {
	box-sizing: border-box;
	position: relative;
	border: solid 5em #000;
	border-image: repeating-linear-gradient(45deg, 
			#000, #000 1.5%, 
			transparent 1.5%, transparent 5%);
	border-image-slice:80;
	padding: 2em;
	width: 300px; height: 300px;	
}

#image{
	width: 300px; height: 300px;
	background: repeating-linear-gradient(45deg, 
			#000, #000 1.5%, 
			transparent 1.5%, transparent 5%);}



input{width:300px;}

80