Border Image - Tạo đường viền bằng hình trong CSS
Border Image trong CSS là việc thêm hình ảnh xuất hiện trên đường viền cho các phần tử. Bạn không cần sử dụng bất cứ HTML code nào để gọi Border Image.
Thuộc tính border-image trong CSS
Thuộc tính border-image trong CSS cho phép bạn chỉ định một hình ảnh sẽ sử dụng thay thế đường viền thông thường xung quanh một phần tử.
Thuộc tính có giá trị đi theo:
- Hình ảnh được sử dụng làm đường viền
- Nơi để cắt hình ảnh
- Xác định các phần được lặp đi lặp lại hoặc kéo dài.
Ở bài viết này, Quantrimang.com sẽ sử dụng hình ảnh sau có tên là "Border-image.png":
Thuộc tính border-image cắt hình ảnh thành chín phần kiểu như bảng cờ caro như sau:
Lúc này ta chú ý các phần 1, 3, 7, 9 là bốn góc và nó cố định, phần 5 là vị trí trung tâm và những phần còn lại sẽ bị ảnh hưởng bởi các giá trị như round, repeat hoặc stretch bạn chỉ định.
Ví dụ 1: Các phần giữa của hình ảnh được lặp lại để tạo đường viền:
#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30 round;}
Ở ví dụ này, các phần giữa của hình ảnh được lặp lại để tạo thành đường viền.
Lưu ý: Internet Explorer 10 và các phiên bản cũ hơn không hỗ trợ thuộc tính border-image.
Code đầy đủ:
<!DOCTYPE html><html><head><style>#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30 round;}</style></head><body><h1>Thuộc tính border-image trong CSS</h1><p>Ở ví dụ này, các phần giữa của hình ảnh được lặp lại để tạo thành đường viền:</p><p id="borderimg">border-image: url(border-image.png) 30 round;</p><p>Hình gốc:</p><img src="border-image.png"><p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không hỗ trợ thuộc tính border-image.</p></body></html>
Ví dụ 2: Các phần giữa của hình ảnh được kéo dài để tạo đường viền.
#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30 stretch;}
Ở ví dụ này, các phần giữa của hình ảnh được kéo dài để tạo thành đường viền.
Code đầy đủ:
<!DOCTYPE html><html><head><style>#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30 stretch;}</style></head><body><h1>Thuộc tính border-image trong CSS</h1><p>Ở ví dụ này, các phần giữa của hình ảnh được kéo dài để tạo thành đường viền:</p><p id="borderimg" style="text-align: center;">border-image: url(border-image.png) 30 stretch;</p><p>Hình gốc:</p><img src="border-image.png"><p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không hỗ trợ thuộc tính border-image.</p></body></html>
Cắt lát Border Image để tạo đường viền mới lạ
Các cách cắt lát hình ảnh để làm đường viền khác nhau sẽ tạo nên rất nhiều mới lạ, thay đổi hoàn toàn giao diện của đường viền.
Lát cắt kiểu 1:
#borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 50 round;}
Lát cắt kiểu 2:
#borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 20% round;}
Lát cắt kiểu 3:
#borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30% round;}
Code đầy đủ:
<!DOCTYPE html><html><head><style>#borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 50 round;}#borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 20% round;}#borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border-image.png) 30% round;}</style></head><body><h1>Thuộc tính border-image trong CSS</h1><p id="borderimg1">border-image: url(border-image.png) 50 round;</p><p id="borderimg2">border-image: url(border-image.png) 20% round;</p><p id="borderimg3">border-image: url(border-image.png) 30% round;</p><p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không hỗ trợ thuộc tính border-image.</p></body></html>
Bạn nên đọc
-
Hiệu ứng chuyển động Animation trong CSS
-
Hiệu ứng Shadow trong CSS
-
Người mới bắt đầu học lập trình máy tính cần tập trung vào những gì?
-
Thuộc tính Display (inline-block) trong CSS
-
9 lý do bạn nên trang bị một chút kiến thức về HTML và CSS
-
Sử dụng bố cục trang Flexbox trong CSS
-
Thuộc tính Opacity/Transparency trong CSS
-
Một số thuộc tính xử lý Text trong CSS
-
Bảng mã màu chuẩn cho lập trình viên, nhà thiết kế
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách xem địa chỉ IP trên máy tính, xem địa chỉ IP Win 10
Hôm qua -
Hàm COUNTIF: Đếm có điều kiện trong Excel
Hôm qua 3 -
Phím tắt GTA V, phím điều khiển GTA V trên máy tính
Hôm qua -
Những lời xin lỗi chân thành nhất
Hôm qua -
Đổi PDF sang Word nhanh, không lỗi font chữ mới nhất 06/09/2025
Hôm qua -
Cách đổi dấu chấm thành dấu phẩy trên Google Sheets
Hôm qua -
Tổng hợp các mã lệnh trong game Đế Chế
Hôm qua -
Top 100 chip điện thoại mạnh nhất năm 2025
Hôm qua -
20+ cách quay màn hình máy tính, quay màn hình laptop
Hôm qua 20 -
Cách gửi danh thiếp Zalo, chia sẻ danh bạ Zalo trên điện thoại, máy tính
Hôm qua