วิธีตั้งค่า Border Image Slice (Inward Offsets) ใน JavaScript

ใช้ Property borderImageSlice เพื่อกำหนด Inward Offsets — ตัดรูปภาพ Border Image เป็น 9 ส่วน (4 Corners, 4 Edges, 1 Center)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: blue;
        border: 40px dashed;
        border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
        border-image-slice: 50;
        border-image-width: 0 1 1 1;
        border-image-outset: 0;
        border-image-repeat: round;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p>Demo Text!</p>
    </div>
    <button onclick="display()">Set Inward Offsets</button>
    <script>
      function display() {
        document.getElementById("box").style.borderImageSlice = "20% 20%";
      }
    </script>
  </body>
</html>

คำอธิบาย borderImageSlice

• ตัดรูปภาพ Border Image ด้วย 4 เส้น (Top, Right, Bottom, Left) → ได้ 9 ส่วน
• ค่า: number (Pixels สำหรับ Raster, Unitless สำหรับ Vector/SVG) หรือ %
• 1-4 ค่า: 50 (ทั้ง 4 ด้าน), "20 30" (TB, LR), "10 20 30" (T, LR, B), "5 10 15 20" (T, R, B, L)
• Center Part: Default ถูกทิ้ง (Fill) — ใช้ fill keyword เพื่อเก็บ: border-image-slice: 30 fill

Border Image 9-Slice Visualization

┌─────────┬──────────────┬─────────┐
│ Corner  │   Edge Top   │ Corner  │  ← Top Slice
├─────────┼──────────────┼─────────┤
│ Edge    │   Center     │ Edge    │  ← Middle (Fill/Empty)
│ Left    │  (Discarded) │ Right   │
├─────────┼──────────────┼─────────┤
│ Corner  │  Edge Bottom │ Corner  │  ← Bottom Slice
└─────────┴──────────────┴─────────┘
   Left       Bottom        Right
    Slice      Slice         Slice

Shorthand

border-image: source slice / width / outset repeat;
border-image: url(border.png) 30 / 15px / 0 round;