Thiết lập đường dẫn ảnh border với border-image-source trong CSS

Giới thiệu

Thuộc tính border-image-source chỉ định hình ảnh nguồn dùng cho border. Có thể là URL ảnh (png, jpg, svg, gif) hoặc gradient.

Cú pháp

border-image-source: none | <image>;
/*  = url() | gradient() */

Ví dụ cơ bản

<!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;
    }
  </style>
</head>
</body>
  <p id="borderimg1">Border image từ URL ảnh</p>
</html>

Sử dụng Gradient làm border image

<style>
  .gradient-border {
    border: 5px solid transparent;
    border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
    border-image-slice: 1;
    border-image-width: 5px;
  }
  
  .radial-border {
    border: 10px solid transparent;
    border-image-source: radial-gradient(circle, #ff6b6b, #ee5253);
    border-image-slice: 1;
    border-image-width: 10px;
  }
</style>

Các định dạng ảnh hỗ trợ

Định dạng	Hỗ trợ	Ghi chú
PNG	✓ Tất cả	Hỗ trợ trong suốt, khuyến nghị cho border
JPG	✓ Tất cả	Không trong suốt, kích thước nhỏ
SVG	✓ Hiện đại	Vector, không bị mờ khi scale, tốt cho responsive
GIF	✓ Tất cả	Hỗ trợ animation (border động!)
WebP/AVIF	Hiện đại	Nén tốt, cần fallback
CSS Gradient	✓ Hiện đại	Không cần file ảnh, tùy biến vô hạn

Lưu ý

Phải có border hoặc border-width > 0 để border-image hiển thị
Mặc định border-image-slice: 100% → toàn bộ ảnh thành 1 ô (thường không đẹp)
Kết hợp với border-image-repeat: round cho kết quả tốt nhất
Dùng none để hủy border image: border-image-source: none;