Thuộc tính border-image trong CSS
Bùi Tấn Lực - 880
- 07/10/2025
Chức năng của Thuộc tính border-image trong CSS
Thuộc tính border-image trong CSS dùng để kẻ đường viền của phần tử HTML bằng hình ảnh, thường hình ảnh có các biểu tượng hình học nằm trong một khung hình.
Thuộc tính border-image phải kết hợp với thuộc tính border giá trị transparent (ví dụ border: 10px solid transparent), để tạo border nền trước.
Cú pháp của Thuộc tính border-image trong CSS
border-image: url('duong-dan-hinh') conso kieu;
duong-dan-hinh: là đường dẫn tới hình ảnh dùng làm border.
conso: Là con số 50, 30, 20, 30%, 20%,..... bạn hãy thay đổi bằng nhiều con số khác để có nhiều hình dạng border khác nữa.
kieu: Các kiểu như round, stretch,....
Code Thuộc tính border-image trong CSS
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 round;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 50 round;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% round;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% round;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 stretch;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% stretch;
border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% stretch;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; border: 10px solid transparent;
padding: 15px; margin-bottom:15px
}
</style>
</head>
<body>
<h1>Code Thuộc tính border-image trong CSS</h1>
<p>Dùng để kẻ đường viền của phần tử HTML bằng hình ảnh, thường hình ảnh có các biểu tượng hình học nằm trong một khung hình, thuộc tính border-image phải kết hợp với thuộc tính border giá trị transparent (ví dụ border: 10px solid transparent), để tạo border nền trước:</p>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30 round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 round;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 50 round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 50 round;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 20% round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% round;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30% round;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% round;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30 stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30 stretch;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 20% stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 20% stretch;</div>
<div style="border-image: url('https://webmoi.vn/thumuc/border-hinh.png') 30% stretch;">border-image: url('https://webmoi.vn/thumuc/borderhinh.png') 30% stretch;</div>
<p><b>Hình gốc:</b></p>
<p><img src="https://webmoi.vn/thumuc/border-hinh.png"> </p>
</body>
</html>
Cách sử dụng border-image hiệu quả trong CSS
Để border-image hiển thị đúng như mong muốn, không chỉ cần khai báo ảnh viền mà còn phải phối hợp hợp lý các thuộc tính điều khiển cách cắt, lặp, kéo giãn và mở rộng hình ảnh. Khi hiểu rõ vai trò của từng thuộc tính, bạn có thể tạo khung viền có họa tiết mà không cần dùng thêm nhiều phần tử HTML.
Thay đổi border-image-slice để điều chỉnh khung viền
border-image-slice quyết định cách hình ảnh được chia thành các vùng để tạo nên bốn cạnh và bốn góc của viền. Đây là thuộc tính đặc biệt quan trọng vì chỉ cần giá trị cắt không phù hợp, họa tiết trên viền có thể bị lệch, méo hoặc mất chi tiết.
Giá trị càng lớn thì vùng ảnh được lấy làm phần viền càng rộng. Khi sử dụng ảnh có thiết kế khung sẵn, nên thử điều chỉnh giá trị này cho đến khi các góc và cạnh khớp với cấu trúc của ảnh gốc.
.box {
border: 12px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
}
Nếu hình ảnh có phần góc được thiết kế rõ ràng, việc xác định đúng khoảng cắt sẽ giúp các chi tiết ở bốn góc được giữ nguyên trong khi phần giữa có thể tiếp tục lặp hoặc kéo giãn.
Kết hợp border-image-repeat với stretch và round
border-image-repeat xác định cách phần hình ảnh ở giữa mỗi cạnh được phân bổ. Hai giá trị thường gặp là stretch và round.
- stretch: kéo giãn phần ảnh để phủ kín chiều dài hoặc chiều rộng của cạnh.
- round: lặp phần ảnh và điều chỉnh số lần lặp để hạn chế việc cắt dở một họa tiết.
Với hình ảnh chứa hoa văn có tính lặp, round thường cho kết quả tự nhiên hơn. Ngược lại, stretch phù hợp khi phần giữa của ảnh có thể kéo dài mà không làm ảnh hưởng đáng kể đến thiết kế.
.box {
border: 12px solid transparent;
border-image: url("border.png") 30 round;
}
Điều chỉnh border-image-width và border-image-outset
border-image-width kiểm soát độ rộng của vùng ảnh được dùng để hiển thị viền, trong khi border-image-outset cho phép phần viền ảnh mở rộng ra bên ngoài mép của phần tử.
Hai thuộc tính này hữu ích khi kích thước viền hiển thị chưa cân đối với thiết kế. Thay vì thay đổi trực tiếp kích thước hình ảnh, bạn có thể tinh chỉnh vùng hiển thị bằng CSS.
.box {
border: 8px solid transparent;
border-image: url("border.png") 25 round;
border-image-width: 12px;
border-image-outset: 4px;
}
Khi sử dụng border-image-outset, cần lưu ý phần viền có thể nằm ngoài kích thước trực quan của phần tử. Vì vậy, nên kiểm tra khoảng cách với các thành phần xung quanh, đặc biệt khi bố cục có nhiều khối nằm sát nhau.
Những lỗi thường gặp khi sử dụng border-image
Một lỗi phổ biến là khai báo border-image nhưng quên đặt border-style hoặc border-width. Khi đó, hình ảnh viền có thể không xuất hiện như dự kiến vì phần tử chưa có vùng border phù hợp để hiển thị.
Ngoài ra, border-image-slice không phù hợp với cấu trúc ảnh cũng dễ khiến các góc bị sai tỷ lệ hoặc hoa văn trên cạnh bị biến dạng. Nếu ảnh viền có thiết kế phức tạp, nên xác định vùng góc và vùng cạnh trước khi chọn giá trị cắt.
- Kiểm tra phần tử đã có border với độ rộng phù hợp.
- Điều chỉnh border-image-slice theo cấu trúc thực tế của hình ảnh.
- Chọn stretch hoặc round dựa trên đặc điểm của họa tiết.
- Không lạm dụng border-image-outset nếu viền có thể chồng lên thành phần khác.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-image trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
