Cơ chế hoạt động của border-image

Thuộc tính border-image trong CSS3 cho phép sử dụng hình ảnh làm viền cho các phần tử, thay thế hoàn toàn cho các giá trị truyền thống như border-style. Đây là thuộc tính viết tắt bao gồm năm thành phần riêng biệt: border-image-source, border-image-slice, border-image-width, border-image-outset, và border-image-repeat.

Giá trị mặc định và cách dùng

Khi border-image được đặt là none, hệ thống sẽ tự động chuyển sang hiển thị viền theo border-style đã thiết lập. Để áp dụng hình ảnh viền, bạn cần chỉ định một đường dẫn hình ảnh hợp lệ:

.custom-border {
  border: 20px solid #333;
  border-image: url('frame.png') 27 fill / 27px / 27px repeat;
}

Phân tích từng thành phần

1. border-image-source

Chỉ định nguồn hình ảnh để làm viền. Giá trị mặc định là none. Khi không có hình ảnh, viền sẽ dựa vào border-style.

2. border-image-slice

Xác định cách cắt hình ảnh thành 9 khu vực: 4 góc, 4 cạnh, và trung tâm. Các giá trị có thể là số nguyên hoặc phần trăm, ví dụ: 27 27 27 27. Nếu không dùng từ khóa fill, phần trung tâm sẽ bị ẩn (trong suốt).

• border-image-slice: 27 → Cắt đều ở cả bốn cạnh.
• border-image-slice: 27 30 27 30 → Cắt khác nhau theo từng hướng.

3. border-image-width

Định nghĩa độ rộng của viền hình ảnh. Có thể dùng đơn vị px, em, % hoặc giá trị cụ thể như auto. Nếu không khai báo, hệ thống sẽ tự động lấy từ border-width.

4. border-image-outset

Cho phép kéo dài viền ra ngoài kích thước thực tế của phần tử. Giống như outline-offset, nhưng áp dụng cho viền hình ảnh.

5. border-image-repeat

Quy định cách lặp lại các vùng hình ảnh khi chúng không đủ để phủ kín viền. Các giá trị phổ biến: repeat, round, space, stretch.

Lưu ý quan trọng về hành vi cắt và kéo giãn

Hình ảnh được cắt thành 9 khối. Các khối góc luôn giữ nguyên kích thước nếu có thể; nếu kích thước viền lớn hơn, các khối cạnh và góc sẽ bị kéo giãn để phù hợp. Trong trường hợp viền nhỏ hơn kích thước cắt, hình ảnh có thể bị thu nhỏ hoặc cắt bỏ.

Việc sử dụng fill trong border-image-slice sẽ hiển thị phần trung tâm (khối thứ 9), ngược lại nó sẽ bị ẩn.

Nếu tổng giá trị cắt trái và phải vượt quá chiều rộng phần tử, các khối trên và dưới sẽ trống. Tương tự với chiều cao nếu cắt trên và dưới quá lớn.

Minh họa bằng ví dụ thực tế

Với hình ảnh 81x81px chia thành 9 ô vuông 27x27px (4 góc màu cam, 4 cạnh màu vàng đất, trung tâm trong suốt), khi áp dụng:

.frame-box {
  border: 54px solid #000;
  border-image: url('frame.png') 27 fill / 54px / 54px repeat;
}

Hình ảnh sẽ được kéo giãn để khớp với độ rộng viền 54px.

Ngược lại, nếu viền nhỏ hơn (ví dụ 14px), hình ảnh sẽ bị thu nhỏ hoặc cắt đi phần dư thừa.