Bùi Tấn Lực - 24
- 07/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính border-image trong CSS
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
<!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>
<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>
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.
- 2 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 *
