Tidadigi Logo

CSS border-image-repeat Property

Trong CSS, border-image-repeat property được dùng để масштабирование và sắp xếp lặp lại ảnh viền. Nó có thể dùng để khớp phần giữa của ảnh viền với kích thước viền. Nó có thể có một hoặc hai giá trị. Một giá trị cho trục ngang và một cho trục dọc.

Nếu chỉ có một giá trị, nó áp dụng cho tất cả các cạnh. Nếu có hai giá trị, một cho cạnh ngang, một cho cạnh dọc.

Syntax:

border-image-repeat: stretch|repeat|round|initial|inherit

Property Values: 

  • stretch: Đây là giá trị mặc định, dùng để kéo dãn ảnh lấp đầy khu vực.
  • repeat: Thuộc tính này được dùng để lặp lại ảnh nền.
  • round: Nó được dùng để lặp lại ảnh, lấp đầy khu vực. Nếu ảnh không lấp đầy vừa vặn, ảnh sẽ được масштабирование lại.
  • initial: Nó được dùng để đặt thuộc tính border-image-repeat về giá trị mặc định.
  • inherit: Nó được dùng để kế thừa thuộc tính border-image-repeat từ phần tử cha. 

Example: Trong ví dụ này, ta dùng thuộc tính border-image-repeat: stretch;.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>

    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-repeat: stretch;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>border-image-repeat: stretch;</h2>
</body>
</html>

Output: 

css-border-image-repeat-property

Example: Trong ví dụ này, ta dùng thuộc tính border-image-repeat: repeat;.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>

    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-repeat: repeat;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>border-image-repeat: repeat;</h2>
</body>
</html>

Output: css-border-image-repeat-property

Example: Trong ví dụ này, ta dùng thuộc tính border-image-repeat: round;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>

    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-repeat: round;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>border-image-repeat: round;</h2>
</body>
</html>

Output: css-border-image-repeat-property

Example: Trong ví dụ này, ta dùng thuộc tính border-image-repeat: initial;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>

    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-repeat: initial;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>border-image-repeat: initial;</h2>
</body>
</html>

Output: 

css-border-image-repeat-property

Supported Browsers: Các trình duyệt hỗ trợ thuộc tính border-image-repeat được liệt kê dưới đây:

  • Google Chrome 15.0 trở lên
  • Edge 12.0 trở lên
  • Internet Explorer 11.0 trở lên
  • Firefox 15.0 trở lên
  • Opera 15.0 trở lên
  • Safari 6.0 trở lên

Last Updated : 21/07/2025