Facing problem while using border-image-slice
I am using this code in order to learn about border-image-slice and other related property.
The problem is the unit of value defined for border-image-slice. Eg i get different output if i supply value 35, 35px and 35%. I understand the reason for the %age value, but shouldn't the output for other two be the same?
I have also attached the image i am using in this example.
10 Replies
please put your code into a codepen (https://codepen.io). not everyone that wants to help has a code editor at the ready and most people will not download a random file that they know nothing about
for
border-image-slice pixel values are done as unit less numbers. 50px is not a supported value. https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice#valuesHere is the link to Codepen: https://codepen.io/anurag1989/pen/oNavQPr
in css u need to define unit
i do not think only saying 35 would even do anything
cause 35 alone can mean anything,
px,%,em,rem,vh,vw,rem, anything
so u have to define a unit
In the Codepen, you can set the border-image-slice value to be something like 35, 25px and 35%. Make sure to use the image I supplied (or any other) and see the difference.
it doesn't chnage anything at all regardless of what value I give
there's prolly something off with your code
but yaa i looked on web..image slice doesn't require a unit
Here is the video of issue I want to point to. Please have a look.
I'm well aware that in the vast majority of cases CSS requires units on values. In the specific case of
border-image-slice however a value with px at the end is invalid and will produce the same result as if you have no border-image-slice declaration. Please read the MDN doc I linked aboveThanks! Now I got the reason for this behavior