Tidadigi Logo

CSS border-image-source Property

Thuộc tính border-image-source được dùng để chỉ định nguồn ảnh làm đường viền cho một phần tử.

Cú pháp:

border-image-source: url(image-path.png)| none| initial| inherit;

Lưu ý: Nếu giá trị là none, các kiểu đường viền thông thường sẽ được sử dụng. Ảnh có thể chia thành các vùng với border-image-slice.

Giá trị mặc định: Giá trị mặc định của thuộc tính này là none.

Các giá trị:

  • none: Không có hình ảnh nào được chỉ định cho đường viền.
  • image: Chỉ định đường dẫn của hình ảnh dùng làm đường viền của phần tử.
  • initial: Khởi tạo thuộc tính với giá trị mặc định của nó.
  • inherit: Thuộc tính này nhận giá trị từ phần tử cha.

Ví dụ:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-image-source Property
    </title>
    <style>
        body {
            text-align: center;
            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: 50;
            border-image-width: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>border-image-source property</h2>
    <div class="border1">GEEKSFORGEEKS</div>
</body>
</html>

Đầu ra:

css-border-image-source-property

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ CSS | border-image-source Property được liệt kê dưới đây:

  • Chrome 15.0
  • Edge 12.0
  • Firefox 15.0
  • Internet Explorer 11.0
  • Opera 15.0
  • Safari 6.0

Last Updated : 21/07/2025