Thuộc tính border-left-color trong CSS
Bùi Tấn Lực - 813
- 06/10/2025
Chức năng của Thuộc tính border-left-color trong CSS
Thuộc tính border-left-color trong CSS dùng để quy định màu sắc đường viền trái của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-left-style để quy định kiểu đường viền và thuộc tính border-left-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-left-color trong CSS
border-left-color: mausac;
mausac: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
Code Thuộc tính border-left-color trong CSS
border-left-color: red;
border-left-color: #0000FF;
border-left-color: rgb(201, 76, 76);
border-left-color: rgba(201, 76, 76, 0.3);
border-left-color: hsl(89, 43%, 51%);
border-left-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-left-color 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;border-left-width: 5px;border-left-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-left-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trái của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-left-style để quy định kiểu đường viền và thuộc tính border-left-width để quy định chiều rộng cho đường viền:</span>
<div style="border-left-color: red;">border-left-color: red;</div>
<div style="border-left-color: #0000FF;">border-left-color: #0000FF;</div>
<div style="border-left-color: rgb(201, 76, 76);">border-left-color: rgb(201, 76, 76);</div>
<div style="border-left-color: rgba(201, 76, 76, 0.3);">border-left-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-left-color: hsl(89, 43%, 51%);">border-left-color: hsl(89, 43%, 51%);</div>
<div style="border-left-color: hsla(89, 43%, 51%, 0.3);">border-left-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-left-color: transparent;">border-left-color: transparent;</div>
</body>
</html>
Ứng dụng border-left-color trong thiết kế giao diện CSS
border-left-color không chỉ dùng để đổi màu đường viền trái. Khi kết hợp đúng với kiểu và độ dày của viền, thuộc tính này có thể tạo điểm nhấn trực quan cho từng khu vực trên giao diện mà không cần thêm nhiều thành phần HTML.
Tạo điểm nhấn cho nội dung bằng màu viền trái
Một đường viền trái có màu nổi bật giúp người đọc nhanh chóng nhận biết những nội dung cần chú ý như ghi chú, cảnh báo, mẹo sử dụng hoặc thông tin quan trọng. Cách này đặc biệt phù hợp với các khối nội dung có nền đơn giản.
Để đường viền hiển thị rõ, cần xác định cả kiểu và độ rộng của viền. border-left-color chỉ quyết định màu sắc, không tự tạo ra đường viền nếu phần viền chưa được thiết lập.
Kết hợp border-left-color với border-left-width và border-left-style
Ba thuộc tính này đảm nhiệm ba thành phần khác nhau của đường viền trái: màu sắc, độ dày và kiểu hiển thị. Kết hợp chúng giúp kiểm soát chính xác diện mạo của viền thay vì chỉ thay đổi màu.
.note {
border-left-width: 4px;
border-left-style: solid;
border-left-color: #2563eb;
}
Trong ví dụ trên, màu xanh được áp dụng cho đường viền trái, trong khi độ rộng và kiểu viền được thiết lập riêng. Cách viết này dễ điều chỉnh khi cần thay đổi giao diện hoặc xây dựng nhiều trạng thái nội dung khác nhau.
Tạo thanh màu bên trái cho thông báo, trích dẫn và thẻ nội dung
Viền trái có màu riêng có thể được dùng như một thanh nhận diện cho các khối thông báo, trích dẫn hoặc thẻ nội dung. Mỗi màu có thể đại diện cho một nhóm thông tin, chẳng hạn màu xanh cho nội dung hữu ích, màu vàng cho lưu ý và màu đỏ cho cảnh báo.
Cách triển khai này giúp giao diện có hệ thống nhận diện trực quan mà vẫn giữ cấu trúc HTML gọn. Khi thay đổi màu chủ đạo của website, chỉ cần điều chỉnh giá trị của border-left-color trong CSS là có thể cập nhật phần nhận diện tương ứng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-left-color 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 *
