Tidadigi Logo

CSS Border Images

Thuộc tính border-image trong CSS được dùng để chỉ định đường viền ảnh. Thuộc tính này tạo đường viền bằng ảnh thay vì đường viền thông thường.

Thuộc tính này bao gồm ba phần được liệt kê dưới đây để tạo ra đường viền ảnh.

  • Ảnh đầy đủ được sử dụng làm đường viền cho phần tử HTML.
  • Một phần của ảnh được sử dụng để làm đường viền.
  • Phần giữa của ảnh được lặp lại hoặc kéo dãn làm đường viền.

Thuộc tính border-image chia ảnh thành chín phần như bàn cờ tic-tac-toe.

Syntax:

element {
    border-image: url(border.png);
}

border-image properties: Có nhiều thuộc tính border-image và chúng được liệt kê dưới đây.

  • border-image-source: Thuộc tính này dùng để thiết lập đường dẫn cho ảnh viền.
  • border-image-width: Thuộc tính này dùng để thiết lập độ rộng của ảnh viền.
  • border-image-slice: Thuộc tính này được dùng để cắt ảnh viền thành các phần.
  • border-image-repeat: Thuộc tính này thiết lập cách hiển thị ảnh viền (bo tròn, lặp lại, kéo dãn).
  • border-image-outset: Thuộc tính này chỉ định khoảng cách ảnh viền mở rộng ra ngoài hộp viền.

Example: Ví dụ này minh họa cách sử dụng thuộc tính border-image trong CSS.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | Border Images
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .border1 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
        }

        .border2 {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png) 30 stretch;
        }

        .border3 {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png) 20% round;
        }

        div {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>border-image property</h2>
    <div class="border1">Border 1</div>
    <div class="border2">Border 2</div>
    <div class="border3">Border 3</div>
</body>
  
</html>

Output:

css-border-imagesSupported Browsers: Các trình duyệt được hỗ trợ bởi border-image property được liệt kê dưới đây.

  • Google Chrome 16.0 trở lên được hỗ trợ đầy đủ.
  • Edge 12.0 trở lên cũng hỗ trợ thuộc tính này.
  • Firefox 15.0 trở lên hỗ trợ border-image rất tốt.
  • Opera 11.0 trở lên tương thích với thuộc tính này.
  • Safari 6.0 trở lên cũng hỗ trợ đầy đủ border-image.

Last Updated : 21/07/2025