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

Giới thiệu

Thuộc tính border-image-repeat kiểm soát cách các mảnh border image (sau khi slice) được lặp hoặc kéo dãn để lấp đầy 4 cạnh border.

4 giá trị chính

Giá trị	Hành vi	Phù hợp cho
`stretch` (mặc định)	Kéo dãn mảnh cạnh để lấp đầy — có thể méo hình	Gradient, pattern đơn giản
`repeat`	Lặp mảnh cạnh (tile) — có thể bị cắt ngang ở cuối	Pattern nhỏ, seamless texture
`round`	Lặp VÀ tự co dãn nhẹ để vừa khít — không bị cắt	Pattern decorative, frame ảnh (khuyên dùng)
`space`	Lặp VÀ thêm khoảng trắng đều giữa các ô để vừa khít	Pattern cần khoảng cách đều

Cú pháp

border-image-repeat: stretch | repeat | round | space {1,2};
/* 1 giá trị: 4 cạnh cùng hành vi */
/* 2 giá trị: top/bottom | left/right */

Ví dụ: border-image-repeat: round

<!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;      /* Tự co dãn vừa khít */
      border-image-slice: 50;
      border-image-width: 10px;
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image repeat: round</p>
</body>
</html>

2 giá trị: Horizontal | Vertical

/* Top/Bottom: round, Left/Right: stretch */
border-image-repeat: round stretch;

/* Top/Bottom: repeat, Left/Right: space */
border-image-repeat: repeat space;

So sánh trực quan (cùng 1 ảnh pattern)

<style>
  .demo { width: 200px; height: 80px; border: 20px solid transparent; margin: 10px; }
  .demo { border-image-source: url(pattern.png); border-image-slice: 20; }
  
  .stretch { border-image-repeat: stretch; }
  .repeat  { border-image-repeat: repeat; }
  .round   { border-image-repeat: round; }
  .space   { border-image-repeat: space; }
</style>

<div class="demo stretch">stretch (méo)</div>
<div class="demo repeat">repeat (cắt ngang)</div>
<div class="demo round">round (vừa khít ✓)</div>
<div class="demo space">space (có gap)</div>

Lưu ý

Cần border-image-slice phù hợp — slice quá nhỏ → quá nhiều lặp; slice quá lớn → góc bị biến dạng
round là lựa chọn an toàn nhất cho decorative border
Kết hợp trong shorthand: border-image: url(img.png) 30 / 20px round;
Vùng giữa (center slice) mặc định không hiển thị — thêm fill vào slice nếu cần