Thuộc tính border-bottom-color trong CSS
Bùi Tấn Lực - 868
- 06/10/2025
Chức năng của Thuộc tính border-bottom-color trong CSS
Thuộc tính border-bottom-color trong CSS dùng để quy định màu sắc đường viền dưới của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-bottom-style để quy định kiểu đường viền và thuộc tính border-bottom-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-bottom-color trong CSS
border-bottom-color: mausac;
mausac: Màu sắc của đường viền dưới, ví dụ: #ff0000, red,...
Code Thuộc tính border-bottom-color trong CSS
border-bottom-color: red;
border-bottom-color: #0000FF;
border-bottom-color: rgb(201, 76, 76);
border-bottom-color: rgba(201, 76, 76, 0.3);
border-bottom-color: hsl(89, 43%, 51%);
border-bottom-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-bottom-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-bottom-width: 5px;border-bottom-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-bottom-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền dưới của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-bottom-style để quy định kiểu đường viền và thuộc tính border-bottom-width để quy định chiều rộng cho đường viền:</span>
<div style="border-bottom-color: red;">border-bottom-color: red;</div>
<div style="border-bottom-color: #0000FF;">border-bottom-color: #0000FF;</div>
<div style="border-bottom-color: rgb(201, 76, 76);">border-bottom-color: rgb(201, 76, 76);</div>
<div style="border-bottom-color: rgba(201, 76, 76, 0.3);">border-bottom-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-bottom-color: hsl(89, 43%, 51%);">border-bottom-color: hsl(89, 43%, 51%);</div>
<div style="border-bottom-color: hsla(89, 43%, 51%, 0.3);">border-bottom-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-bottom-color: transparent;">border-bottom-color: transparent;</div>
</body>
</html>
Cách sử dụng border-bottom-color kết hợp với các thuộc tính border khác
border-bottom-color thường phát huy hiệu quả tốt nhất khi được sử dụng cùng border-bottom-style và border-bottom-width. Ba thuộc tính này lần lượt quyết định màu sắc, kiểu hiển thị và độ dày của đường viền phía dưới.
Kết hợp border-bottom-color với border-bottom-style và border-bottom-width
Khi chỉ thiết lập màu nhưng chưa có kiểu đường viền phù hợp, phần đường viền dưới có thể không hiển thị như mong muốn. Vì vậy, nên xác định đầy đủ các thành phần khi cần kiểm soát chi tiết.
.box {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2563eb;
}
Cách viết này tạo một đường viền phía dưới dày 2px, kiểu liền và có màu xanh. Nếu muốn mã CSS ngắn gọn hơn, có thể sử dụng thuộc tính border-bottom để khai báo cả ba giá trị trong cùng một dòng.
Thay đổi màu đường viền dưới khi phần tử được hover
border-bottom-color có thể kết hợp với :hover để tạo hiệu ứng trực quan khi người dùng đưa con trỏ lên phần tử. Cách này phù hợp với liên kết, menu hoặc các nút điều hướng cần phản hồi rõ ràng.
a {
border-bottom: 2px solid #d1d5db;
}
a:hover {
border-bottom-color: #2563eb;
}
Trong ví dụ trên, đường viền ban đầu có màu trung tính và chuyển sang màu xanh khi rê chuột. Việc chỉ thay đổi màu giúp hiệu ứng nhẹ nhàng, không làm kích thước phần tử thay đổi trong quá trình tương tác.
Một số lưu ý khi sử dụng border-bottom-color
- Phải có kiểu đường viền: nên kiểm tra border-bottom-style nếu màu đã được thiết lập nhưng đường viền không xuất hiện.
- Chọn màu phù hợp: màu đường viền nên có đủ độ tương phản với nền để dễ nhận biết nhưng không gây rối mắt.
- Ưu tiên khai báo có chủ đích: nếu chỉ cần đổi màu đường viền dưới, sử dụng border-bottom-color giúp giữ nguyên độ dày và kiểu viền hiện có.
- Kết hợp với trạng thái tương tác: khi dùng cùng :hover, nên giữ hiệu ứng đơn giản để giao diện phản hồi tự nhiên.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-bottom-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 *
