Thuộc tính borderImageSlice trong HTML DOM Style

Thuộc tính borderImageSlice xác định cách một hình ảnh viền (border image) được chia thành các vùng: 4 góc, 4 cạnh và phần trung tâm. Được chỉ định bằng pixel, phần trăm hoặc giá trị toàn cục.

Cú pháp

object.style.borderImageSlice = "number|%|fill|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
number	Pixel (hình raster) hoặc tọa độ vector (hình vector)
%	Phần trăm so với kích thước hình ảnh (mặc định 100%)
fill	Giữ lại phần trung tâm của border-image (hiển thị như background)
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  div { width: 50%; }
  #b1 {
    border: 30px solid transparent;
    padding: 5px;
    font-size: 20px;
    border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
    border-image-slice: 60%;
  }
</style>
<script>
  function changeBorderSlice() {
    document.getElementById("b1").style.borderImageSlice = "10%";
    document.getElementById("Sample").innerHTML = "Border image slice đã được thay đổi";
  }
</script>
</head>
<body>
<div id="b1">Văn bản mẫu bên trong div</div>
<p>Thay đổi border image slice của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderSlice()">Thay đổi Border Slice</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu slice 60% (cắt gần trung tâm). Sau khi nhấn nút, slice 10% (cắt rất mỏng ở rìa), làm viền hình ảnh hiển thị khác biệt rõ rệt.

Cơ chế: 9 vùng được tạo ra: 4 góc (không co giãn), 4 cạnh (co giãn/repeat), 1 trung tâm (mặc định bị loại trừ trừ khi có 'fill').