Thuộc tính CSS border-image-source

Giới thiệu

Thuộc tính border-image-source chỉ định hình ảnh nguồn (hoặc gradient) dùng để vẽ border. Là một trong 5 thuộc tính con của shorthand border-image.

Cú pháp

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

Ví dụ: Ảnh từ URL

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

Sử dụng CSS Gradient làm border image

<style>
  /* Linear gradient border */
  .grad-border {
    border: 4px solid transparent;
    border-image-source: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-image-slice: 1;
  }
  
  /* Conic gradient border (cần conic-gradient support) */
  .conic-border {
    border: 4px solid transparent;
    border-image-source: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);
    border-image-slice: 1;
  }
  
  /* Multiple gradients */
  .multi-grad {
    border: 5px solid transparent;
    border-image-source: 
      linear-gradient(45deg, red, blue),
      linear-gradient(-45deg, green, yellow);
    border-image-slice: 1;
  }
</style>

Các loại hỗ trợ

Loại	Cú pháp	Hỗ trợ
URL ảnh	`url('path.png')`	Tất cả trình duyệt
Linear gradient	`linear-gradient(...)`	Tất cả hiện đại
Radial gradient	`radial-gradient(...)`	Tất cả hiện đại
Conic gradient	`conic-gradient(...)`	Chrome 69+, Firefox 83+, Safari 14+
Repeating gradient	`repeating-linear-gradient(...)`	Tất cả hiện đại
Image-set (responsive)	`image-set(url(img1x.png) 1x, url(img2x.png) 2x)`	Hiện đại (cần prefix -webkit-)

Lưu ý

Phải có border hoặc border-width > 0 (có thể transparent)
Mặc định border-image-slice: 100% → toàn ảnh thành 1 ô → thường không đẹp, cần set slice
none (mặc định): Không có border image, hiển thị border-color/style bình thường
Dùng border-image: none để reset toàn bộ border-image