Cách đặt chế độ lặp viền hình ảnh (borderImageRepeat) bằng JavaScript

Thuộc tính borderImageRepeat kiểm soát cách hình ảnh viền (border-image) được lặp, co giãn hoặc bo tròn để lấp đầy khu vực viền. Giá trị: stretch (mặc định, kéo giãn), repeat (lặp), round (lặp và co giãn để vừa khít), space (lặp và phân bổ khoảng trống đều).

Ví dụ minh họa

Mã sau đổi border-image-repeat từ stretch sang round khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: blue;
      color: white;
      border: 30px solid transparent;
      border-image: url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg');
      border-image-slice: 10 10 30 30;
      border-image-width: 1 1 1 1;
      border-image-repeat: stretch; /* Mặc định: kéo giãn */
      padding: 20px;
      width: 300px;
      height: 150px;
    }
  </style>
</head>
<body>
  <div id="box">
    <p>Demo Text!</p>
  </div>
  <button onclick="changeBorderImageRepeat()">Đổi sang Round</button>
  <script>
    function changeBorderImageRepeat() {
      document.getElementById("box").style.borderImageRepeat = "round";
      /* Hình ảnh viền sẽ lặp và co giãn nhẹ để các ô vừa khít, không bị cắt */
    }
  </script>
</body>
</html>

Các giá trị borderImageRepeat

Giá trị	Hành vi	Hiệu ứng
`stretch`	Kéo giãn một ảnh để lấp đầy	Mặc định. Có thể bị méo nếu tỷ lệ không khớp.
`repeat`	Lặp ảnh (có thể bị cắt ở cuối)	Pattern liền mạch, nhưng cạnh có thể bị cắt giữa chừng.
`round`	Lặp + co giãn nhẹ để vừa khít số nguyên	Không bị cắt, nhưng ảnh có thể bị méo nhẹ.
`space`	Lặp + phân bổ khoảng trống đều giữa các ô	Không méo ảnh, có khoảng trống giữa các ô lặp.

Các thuộc tính border-image liên quan

borderImageSource: URL hình ảnh.
borderImageSlice: Cắt hình ảnh thành 9 vùng (4 góc, 4 cạnh, giữa).
borderImageWidth: Độ rộng khu vực viền hình ảnh.
borderImageOutset: Mở rộng khu vực viền ra ngoài border-box.
borderImageRepeat: (Bài này) Cách lặp/co giãn.
Shorthand: borderImage: source slice / width / outset repeat

Lưu ý: border-image chỉ hiển thị khi border-width > 0 và border-style != none.