วิธีตั้งค่า Border Image Outset (ขยายขอบนอก) ใน JavaScript

ใช้ Property borderImageOutset เพื่อขยายพื้นที่ Border Image ออกนอก Border Box ของ Element (ไม่ส่งผล Layout)

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: gray;
        border: 40px solid;
        border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
        border-image-slice: 50;
        border-image-width: 20px;
        border-image-outset: 0;
        border-image-repeat: round;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p>Demo Text!</p>
    </div>
    <button onclick="display()">Set Border Outside Edges</button>
    <script>
      function display() {
        document.getElementById("box").style.borderImageOutset = "5px 10px 20px 15px";
      }
    </script>
  </body>
</html>

คำอธิบาย borderImageOutset

• ขยาย Border Image นอกจาก Border Edge (Outset)
• ไม่ส่งผลต่อ Layout/Flow — Element อื่นไม่ถูกผลัก
้รับค่า 1-4 ค่า (Top, Right, Bottom, Left) หน่วย: px, em, Number (Multiple ของ border-width)
• ตัวอย่าง: "5px 10px 20px 15px" → Top 5px, Right 10px, Bottom 20px, Left 15px

Border Image Properties ทั้งหมด

Shorthand

border-image: source slice / width / outset repeat;
/* ตัวอย่าง */
border-image: url(border.png) 30 / 10px / 5px round;

Browser Support: IE11+ และ Browser สมัยใหม่ทั้งหมด