Thiết lập border-image-repeat: round, repeat, stretch với CSS

Giới thiệu

Thuộc tính border-image-repeat kiểm soát cách hình ảnh border được lặp/kéo dãn để lấp đầy khu vực border. Có 4 giá trị chính: stretch (mặc định), repeat, round, space.

Giá trị và hành vi

Giá trị	Hành vi
`stretch`	Kéo dãn hình ảnh để lấp đầy (mặc định, có thể bị méo)
`repeat`	Lặp hình ảnh (tile), có thể bị cắt ngang ở cuối
`round`	Lặp hình ảnh và tự co dãn để vừa khít, không bị cắt
`space`	Lặp hình ảnh và thêm khoảng trắng giữa các ô để vừa khít

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;      /* Quan trọng: tự co dãn vừa khít */
      border-image-slice: 40;          /* Cắt 9 vùng từ ảnh nguồn */
      border-image-width: 20px;        /* Độ dày border */
    }
  </style>
</head>
<body>
  <p id="borderimg1">Ví dụ border image với repeat: round</p>
</body>
</html>

So sánh trực quan

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

<div class="box stretch">stretch (kéo dãn)</div>
<div class="box repeat">repeat (lặp, có thể cắt)</div>
<div class="box round">round (co dãn vừa khít) ✓</div>
<div class="box space">space (có khoảng trắng)</div>

Lưu ý

border-image-slice quyết định cách cắt ảnh nguồn thành 9 vùng (4 góc, 4 cạnh, 1 giữa)
Giá trị round thường cho kết quả đẹp nhất cho border decorative
Cần border-image-width hoặc border-width để border hiển thị
Phần giữa (center) của border-image mặc định bị bỏ qua trừ khi dùng fill keyword