Cắt border image với border-image-slice trong CSS

Giới thiệu

Thuộc tính border-image-slice chia hình ảnh nguồn thành 9 vùng (4 góc, 4 cạnh, 1 giữa) bằng 4 đường cắt. Đây là bước quan trọng nhất để border-image hiển thị đúng.

Cơ chế cắt 9 vùng (9-slice scaling)

┌─────────┬─────────┬─────────┐
│  Top-   │  Top    │ Top-    │
│  Left   │  Edge   │ Right   │
├─────────┼─────────┼─────────┤
│ Left    │ Center  │ Right   │
│ Edge    │ (bỏ qua)│ Edge    │
├─────────┼─────────┼─────────┤
│ Bottom- │ Bottom  │ Bottom- │
│ Left    │ Edge    │ Right   │
└─────────┴─────────┴─────────┘

Cú pháp

border-image-slice: <number> | <percentage> {1,4} fill?;

• <number>: Khoảng cách từ cạnh ảnh (pixel cho raster, đơn vị cho vector)
• <percentage>: Phần trăm kích thước ảnh
• fill: Giữ vùng giữa (center) hiển thị như background

Ví dụ: border-image-slice: 40

<!DOCTYPE html>
<html>
<head>
  <style>
    #borderimg1 {
      border: 15px solid transparent;
      padding: 15px;
      border-image-source: url(https://tutorialspoint.com/css/images/border.png);
      border-image-repeat: round;
      border-image-slice: 40;        /* Cắt 40px từ mỗi cạnh */
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image slice = 40px</p>
</body>
</html>

4 giá trị cắt (trên | phải | dưới | trái)

/* 1 giá trị: tất cả 4 cạnh cắt đều */
border-image-slice: 30;

/* 2 giá trị: trên/dưới | trái/phải */
border-image-slice: 20 40;

/* 3 giá trị: trên | trái/phải | dưới */
border-image-slice: 10 30 20;

/* 4 giá trị: trên | phải | dưới | trái */
border-image-slice: 10 20 30 40;

Lưu ý quan trọng

• Vùng center (giữa) mặc định bị loại bỏ — thêm từ khóa fill để giữ: border-image-slice: 30 fill;
• Giá trị number cho ảnh raster = pixel; cho SVG = đơn vị tọa độ
• border-image-slice làm việc cùng border-image-width và border-image-repeat
• Nếu slice lớn hơn nửa ảnh → các vùng góc/cạnh sẽ chồng lấn

Sharding thực tế

/* Shorthand đầy đủ */
border-image: url(frame.png) 30 40 30 40 / 20px 30px 20px 30px / 0 round stretch;
/*         source     slice(top right bottom left) / width / outset repeat */