Thuộc tính CSS border-image (shorthand)

Giới thiệu

Thuộc tính border-image là shorthand gộp 5 thuộc tính con: border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat.

Ví dụ tối giản

<!DOCTYPE html>
<html>
<head>
  <style>
    #borderimg1 {
      border: 15px solid transparent;
      padding: 15px;
      /* Shorthand: source slice repeat */
      border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round;
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image shorthand: slice=50, repeat=round</p>
</body>
</html>

Phân tích ví dụ

• url(...) → border-image-source
• 50 → border-image-slice: 50 (cắt 50px/50% từ 4 cạnh)
• round → border-image-repeat: round (co dãn vừa khít)
• Thiếu / width → dùng mặc định 1 (tức border-width = 15px)
• Thiếu / outset → mặc định 0

Cú pháp đầy đủ

border-image: 
  [ <source> ] 
  [ <slice> ] 
  [ / <width> ]? 
  [ / <outset> ]? 
  [ <repeat> ]?;

Ví dụ nâng cao

<style>
  /* Gradient border */
  .grad-border {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
  }
  
  /* Border khác nhau 4 cạnh */
  .custom-border {
    border: 10px solid transparent;
    border-image: url(frame.png) 20 40 20 40 / 15px 25px 15px 25px / 0 round;
  }
  
  /* Border animation */
  @keyframes border-spin {
    to { border-image-source: linear-gradient(405deg, #667eea, #764ba2); }
  }
  .animated-border {
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #f093fb, #f5576c) 1;
    animation: border-spin 3s linear infinite;
  }
</style>

Hỗ trợ trình duyệt

• Chrome 16+, Firefox 15+, Safari 6+, Edge 12+, Opera 15+
• Cần prefix -webkit- cho Safari cũ, -moz- cho Firefox cũ
• IE 11: hỗ trợ một phần (không hỗ trợ gradient, outset)

Best Practice

• Luôn khai báo border: ... solid transparent trước shorthand
• Dùng round thay vì repeat để tránh cắt ngang pattern
• Kết hợp với border-radius → border-image không bo tròn được (giới hạn đã biết)
• Test trên mobile: border-image có thể gây layout shift nếu width thay đổi