how does border-image-slice works?

Question

I am confused on how border-image-slice works? Does it create a finest element to be used on border or does it make the whole border? For instance, in the code below, for #borderimage1, if the value is 50, it would just create a weird image in just corner. However if the value is 30, it would make the whole border.Below is the code reference taken from w3schools.:

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <h1>The border-image Property</h1>

  <p id="borderimg1">border-image: url(border.png) 50 round;</p>
  <p id="borderimg2">border-image: url(border.png) 20% round;</p>
  <p id="borderimg3">border-image: url(border.png) 30% round;</p>

  <p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>

</html>

read both answers from the duplicate – Temani Afif Dec 03 '21 at 14:12 — Temani Afif, Dec 03 '21 at 14:12

how does border-image-slice works?

0 Answers0