Tạo Border Image (Viền ảnh) với CSS

CSS border-image cho phép dùng ảnh (hoặc gradient) làm viền thay vì màu solid. Cắt ảnh thành 9 phần (9-slice) để co giãn khéo.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  .border-demo {
    margin: 20px 0;
    padding: 20px;
    width: 400px;
    font-size: 18px;
    border: 20px solid transparent; /* Border width = slice size */
  }
  .border1 {
    border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 30 round;
    /* slice=30px, repeat=round (cân chỉnh để không cắt đứt) */
  }
  .border2 {
    border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 2% round;
    /* slice=2% của ảnh */
  }
  .border3 {
    /* Gradient border */
    border-image: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b) 1;
  }
  .border4 {
    /* SVG border */
    border-image: url("data:image/svg+xml,") 25 stretch;
  }
</style>
</head>
<body>
<h1>CSS Border Image</h1>
<p class="border1">Border image với slice 30px, round repeat</p>
<p class="border2">Border image với slice 2%, round repeat</p>
<p class="border3">Border image với Linear Gradient</p>
<p class="border4">Border image với SVG</p>
</body>
</html>

Cú pháp border-image (Shorthand)

border-image: source slice width outset repeat;

/* source: url() | gradient | none */
/* slice: 1-4 values (top right bottom left) - cắt ảnh thành 9 vùng */
/* width: độ rộng viền hiển thị (mặc định = border-width) */
/* outset: mở rộng vùng viền ra ngoài (mặc định 0) */
/* repeat: stretch | repeat | round | space */

9-Slice Scaling (Quan trọng)

Ảnh border được chia thành 9 vùng:

┌─────────┬─────────┬─────────┐
│  Corner │  Top    │ Corner  │  ← Top edge (repeat/round)
├─────────┼─────────┼─────────┤
│  Left   │ Center  │ Right   │  ← Middle (stretch/repeat) - thường transparent
├─────────┼─────────┼─────────┤
│ Corner  │ Bottom  │ Corner  │  ← Bottom edge
└─────────┴─────────┴─────────┘

• 4 góc: Không scale (giữ nguyên)
• 4 cạnh: Scale/repeat theo chiều
• Trung tâm: Thường để transparent (nội dung element hiển thị)

Repeat Values

Gradient Border (Không cần file ảnh)

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1) 1;
  /* slice=1 nghĩa là dùng toàn bộ gradient, stretch */
}

Lưu ý

• border-image đè lên border-color và border-style
• Không ảnh hưởng border-radius (viền ảnh không bo góc) - cần mask/clip-path cho bo góc
• Không trigger layout khi animate (dùng background-image + mask thay thế nếu cần animate)