Thuộc tính border-bottom-width trong CSS
Bùi Tấn Lực - 851
- 06/10/2025
Chức năng của Thuộc tính border-bottom-width trong CSS
Thuộc tính border-bottom-width trong CSS dùng để quy định chiều rộng đườ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-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-bottom-width trong CSS
border-bottom-width: chieurong;
chieurong: Chiều rộng của đường viền dưới, ví dụ 1px, 5px,...
Code Thuộc tính border-bottom-width trong CSS
border-bottom-width: 5px;
border-bottom-width: 1px;
border-bottom-width: thin;
border-bottom-width: thick;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-bottom-width 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-style: solid;border-bottom-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-bottom-width trong CSS</h1>
<span>Dùng để quy định chiều rộng đườ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-color để quy định màu sắc cho đường viền:</span>
<div style="border-bottom-width: 5px;">border-bottom-width: 5px;</div>
<div style="border-bottom-width: 1px;">border-bottom-width: 1px;</div>
<div style="border-bottom-width: thin;">border-bottom-width: thin;</div>
<div style="border-bottom-width: thick;">border-bottom-width: thick;</div>
</body>
</html>
Cách sử dụng border-bottom-width hiệu quả trong CSS
border-bottom-width phát huy hiệu quả nhất khi được dùng cùng các thuộc tính xác định kiểu và màu của đường viền dưới. Việc tách riêng độ rộng giúp bạn kiểm soát chi tiết từng cạnh mà không làm ảnh hưởng đến ba cạnh còn lại.
Kết hợp border-bottom-width với border-bottom-style và border-bottom-color
Chỉ thiết lập border-bottom-width chưa đủ để tạo đường viền nhìn thấy trên phần tử. Bạn nên xác định thêm border-bottom-style để chọn kiểu đường viền và border-bottom-color để thiết lập màu.
Cách kết hợp này phù hợp khi cần tạo đường gạch chân cho tiêu đề, đường phân cách giữa các dòng hoặc nhấn mạnh một khu vực trong giao diện.
.title {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #333;
}
Trong trường hợp muốn viết ngắn gọn, có thể sử dụng thuộc tính border-bottom để khai báo độ rộng, kiểu và màu trên cùng một dòng.
.title {
border-bottom: 2px solid #333;
}
Khi nào nên dùng giá trị px, thin, medium và thick?
Giá trị px thích hợp khi cần kiểm soát chính xác độ dày, chẳng hạn 1px cho đường phân cách nhẹ hoặc 2px đến 3px khi muốn tạo điểm nhấn rõ hơn.
Các giá trị thin, medium và thick mang tính tương đối theo cách trình duyệt xác định. Chúng thuận tiện khi không cần một kích thước cố định, nhưng px thường dễ kiểm soát hơn khi xây dựng giao diện có yêu cầu nhất quán.
.line-light {
border-bottom-width: 1px;
}
.line-medium {
border-bottom-width: 2px;
}
.line-bold {
border-bottom-width: 3px;
}
Những lưu ý khi thiết lập độ rộng đường viền dưới
- Độ rộng chỉ xác định độ dày của đường viền, không quyết định kiểu hiển thị của đường viền.
- Nếu border-bottom-style không tạo đường viền hiển thị, việc tăng border-bottom-width cũng không giúp đường viền xuất hiện.
- Nên chọn độ dày phù hợp với kích thước nội dung để đường viền không gây cảm giác nặng hoặc làm mất cân đối bố cục.
- Khi chỉ cần thay đổi cạnh dưới, sử dụng border-bottom-width sẽ rõ ràng hơn so với thiết lập độ rộng cho toàn bộ bốn cạnh.
- Nếu cần giao diện đồng nhất trên nhiều thành phần, nên sử dụng cùng một nhóm giá trị độ rộng thay vì đặt kích thước tùy ý cho từng phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-bottom-width 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 *
