Thuộc tính border-left trong CSS
Bùi Tấn Lực - 904
- 05/10/2025
Chức năng của Thuộc tính border-left trong CSS
Thuộc tính border-left trong CSS dùng để kẻ đường viền trái cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc.
Cú pháp của Thuộc tính border-left trong CSS
border-left: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền trái, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền trái ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
Code Thuộc tính border-left trong CSS
border-left: 5px solid green;
border-left: 5px dotted green;
border-left: 1px solid #ff0000;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-left 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;background:antiquewhite;margin-bottom:10px;padding:10px}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-left trong CSS</h1>
<span>Dùng để kẻ đường viền trái cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc:</span>
<div style="border-left: 1px solid #ff0000;">border-left: 1px solid #ff0000;</div>
<div style="border-left: 5px solid green;">border-left: 5px solid green;</div>
<div style="border-left: 5px dotted green;">border-left: 5px dotted green;</div>
<div style="border-left: 1px dotted red;">border-left: 1px dotted red;</div>
<div style="border-left: 5px double green;">border-left: 5px double green;</div>
<div style="border-left: 10px double red;">border-left: 10px double red;</div>
<div style="border-left: 5px dashed green;">border-left: 5px dashed green;</div>
<div style="border-left: 10px dashed red;">border-left: 10px dashed red;</div>
<div style="border-left: 1px inset red;">border-left: 1px inset red;</div>
<div style="border-left: 5px inset green;">border-left: 5px inset green;</div>
<div style="border-left: 10px inset red;">border-left: 10px inset red;</div>
<div style="border-left: 1px outset red;">border-left: 1px outset red;</div>
<div style="border-left: 5px outset green;">border-left: 5px outset green;</div>
<div style="border-left: 10px outset red;">border-left: 10px outset red;</div>
<div style="border-left: 1px ridge red;">border-left: 1px ridge red;</div>
<div style="border-left: 5px ridge green;">border-left: 5px ridge green;</div>
<div style="border-left: 1px groove red;">border-left: 1px groove red;</div>
<div style="border-left: 5px groove green;">border-left: 5px groove green;</div>
</body>
</html>
Ứng dụng border-left trong CSS vào thiết kế giao diện
border-left không chỉ dùng để tạo đường viền ở cạnh trái của phần tử. Khi kết hợp với padding, background và hiệu ứng hover, thuộc tính này có thể tạo điểm nhấn trực quan cho nhiều thành phần trên website mà không cần thêm phần tử HTML phụ.
Tạo điểm nhấn cho tiêu đề và đoạn văn bằng border-left
Một đường viền bên trái có thể giúp tiêu đề hoặc đoạn văn nổi bật hơn so với phần nội dung xung quanh. Cách này đặc biệt phù hợp với tiêu đề phụ, nội dung cần lưu ý hoặc những đoạn muốn người đọc chú ý ngay khi lướt trang.
Để khoảng cách giữa đường viền và nội dung hợp lý, nên kết hợp border-left với padding-left. Độ dày đường viền nên vừa phải để tạo điểm nhấn mà không làm bố cục trở nên nặng nề.
<h3>Thông tin quan trọng</h3>
<p class="highlight">Nội dung này được làm nổi bật bằng đường viền bên trái.</p>
<style>
.highlight {
border-left: 4px solid #333;
padding-left: 12px;
}
</style>
Thiết kế thanh thông báo, ghi chú với border-left
border-left rất phù hợp để tạo các khối thông báo, cảnh báo hoặc ghi chú ngắn. Khi đường viền được kết hợp với màu nền tương phản nhẹ, người đọc có thể nhanh chóng nhận biết đây là nội dung cần chú ý.
Cách trình bày này cũng giúp phân biệt phần ghi chú với nội dung chính mà không cần sử dụng quá nhiều thành phần trang trí.
<p class="note">Bạn nên kiểm tra lại cú pháp CSS trước khi áp dụng vào website.</p>
<style>
.note {
border-left: 4px solid #555;
padding: 10px 14px;
background: #f5f5f5;
}
</style>
Kết hợp border-left với background và padding
Chỉ sử dụng đường viền có thể khiến hiệu ứng nhấn mạnh chưa rõ ràng. Kết hợp border-left với background và padding sẽ tạo thành một khu vực nội dung hoàn chỉnh, trong đó đường viền đóng vai trò nhận diện còn màu nền giúp tách khối khỏi phần còn lại của trang.
Nên chọn màu đường viền có liên hệ với màu chủ đạo của giao diện và giữ màu nền ở mức nhẹ. Khoảng đệm bên trái cũng cần đủ lớn để chữ không nằm quá sát đường viền.
<p class="tip">Sử dụng padding để tạo khoảng cách giữa nội dung và border-left.</p>
<style>
.tip {
border-left: 5px solid #444;
padding: 12px 16px;
background: #f7f7f7;
}
</style>
Tạo hiệu ứng hover bằng border-left
border-left có thể được thay đổi khi người dùng di chuyển chuột qua một phần tử. Đây là cách đơn giản để tạo phản hồi trực quan cho các liên kết, mục menu hoặc khối nội dung có khả năng tương tác.
Khi sử dụng hiệu ứng này, nên kết hợp transition để sự thay đổi diễn ra mượt hơn. Đồng thời, cần giữ kích thước tổng thể của phần tử ổn định để tránh bố cục bị xê dịch khi đường viền xuất hiện.
<a class="menu-item" href="#">Xem thêm CSS</a>
<style>
.menu-item {
border-left: 0 solid #333;
padding-left: 12px;
transition: border-left-width 0.2s ease;
}
.menu-item:hover {
border-left-width: 4px;
}
</style>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-left 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 *
