CSS Border Image: Tạo viền từ hình ảnh

Thuộc tính border-image trong CSS hơi phức tạp lúc đầu. Bài viết giải thích cách dùng và lưu ý cross-browser.

Cấu trúc Border Image (Shorthand)

Tương tự border: width style color, border-image dùng shorthand:

border-image: url("image.png")  /* source */
              25%               /* slice */
              / 70px            /* width */
              2px               /* outset */
              stretch;          /* repeat */

Các thành phần longhand

• border-image-source: URL ảnh hoặc gradient.
• border-image-slice: Chia ảnh thành 9 vùng (4 góc, 4 cạnh, 1 giữa). Mặc định vùng giữa bị loại. Giá trị % hoặc số (pixel). Có thể thêm fill để giữ vùng giữa.
• border-image-width: Độ rộng viền ảnh. % hoặc px/rem/em. Tối đa 4 giá trị (mỗi cạnh).
• border-image-outset: Khoảng cách viền ảnh so với border-box của phần tử. Tối đa 4 giá trị.
• border-image-repeat: Hành vi các cạnh (không tính góc): stretch (kéo dãn), repeat (lặp), round (lặp vừa vặn), space (lặp có khoảng trắng). Tối đa 2 giá trị (top/bottom | left/right).

Lưu ý Cross-browser (Quan trọng)

• Firefox, Safari: Hỗ trợ từng longhand property riêng lẻ.
• Chrome: Chỉ hỗ trợ shorthand và bắt buộc có border-style (ví dụ border-style: solid) thì border-image mới hiển thị.

/* Cách viết tương thích mọi trình duyệt */
.border-image-shorthand {
  border-style: solid; /* BẮT BUỘC cho Chrome */
  border-image: url(...) 25% / 70px / 2px round;
  padding: 80px;
}

Kết luận

border-image là shorthand gồm 5 longhand. Để tương thích mọi trình duyệt: luôn khai báo border-style: solid trước khi dùng shorthand border-image.