Thuộc tính border-bottom trong CSS
Bùi Tấn Lực - 873
- 05/10/2025
Chức năng của Thuộc tính border-bottom trong CSS
Thuộc tính border-bottom trong CSS dùng để kẻ đường viền dướ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-bottom trong CSS
border-bottom: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền dưới, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền dưới, ví dụ: #ff0000, red,...
Code Thuộc tính border-bottom trong CSS
border-bottom: 1px solid #ff0000;
border-bottom: 5px solid green;
border-bottom: 5px dotted green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-bottom 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-bottom trong CSS</h1>
<span>Dùng để kẻ đường viền dướ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-bottom: 1px solid #ff0000;">border-bottom: 1px solid #ff0000;</div>
<div style="border-bottom: 5px solid green;">border-bottom: 5px solid green;</div>
<div style="border-bottom: 5px dotted green;">border-bottom: 5px dotted green;</div>
<div style="border-bottom: 1px dotted red;">border-bottom: 1px dotted red;</div>
<div style="border-bottom: 5px double green;">border-bottom: 5px double green;</div>
<div style="border-bottom: 10px double red;">border-bottom: 10px double red;</div>
<div style="border-bottom: 5px dashed green;">border-bottom: 5px dashed green;</div>
<div style="border-bottom: 10px dashed red;">border-bottom: 10px dashed red;</div>
<div style="border-bottom: 1px inset red;">border-bottom: 1px inset red;</div>
<div style="border-bottom: 5px inset green;">border-bottom: 5px inset green;</div>
<div style="border-bottom: 10px inset red;">border-bottom: 10px inset red;</div>
<div style="border-bottom: 1px outset red;">border-bottom: 1px outset red;</div>
<div style="border-bottom: 5px outset green;">border-bottom: 5px outset green;</div>
<div style="border-bottom: 10px outset red;">border-bottom: 10px outset red;</div>
<div style="border-bottom: 1px ridge red;">border-bottom: 1px ridge red;</div>
<div style="border-bottom: 5px ridge green;">border-bottom: 5px ridge green;</div>
<div style="border-bottom: 1px groove red;">border-bottom: 1px groove red;</div>
<div style="border-bottom: 5px groove green;">border-bottom: 5px groove green;</div>
</body>
</html>
Cách sử dụng border-bottom trong CSS hiệu quả
border-bottom không chỉ dùng để tạo một đường viền đơn giản ở cạnh dưới phần tử. Khi kết hợp đúng với khoảng cách, màu sắc và trạng thái tương tác, thuộc tính này có thể giúp phân chia nội dung, làm nổi bật tiêu đề hoặc tạo điểm nhấn cho các thành phần trong giao diện.
Tạo đường kẻ dưới cho tiêu đề và đoạn văn
Đặt border-bottom cho tiêu đề là cách đơn giản để tạo ranh giới trực quan giữa tiêu đề và phần nội dung bên dưới. Với đoạn văn hoặc nhóm nội dung, đường viền cũng có thể được dùng để phân tách các khu vực mà không cần thêm phần tử HTML phụ.
Để đường kẻ không bị dính sát chữ, nên kết hợp với padding-bottom. Cách này tạo khoảng thở hợp lý và giúp giao diện dễ đọc hơn.
h2 {
padding-bottom: 10px;
border-bottom: 2px solid #333;
}
Kết hợp border-bottom với padding và margin
border-bottom chỉ tạo đường viền, còn vị trí của đường viền so với nội dung phụ thuộc nhiều vào khoảng cách bên trong phần tử. Vì vậy, padding-bottom thường được sử dụng để tạo khoảng cách giữa nội dung và đường kẻ.
Nếu muốn tạo khoảng cách giữa phần tử hiện tại với nội dung tiếp theo, có thể dùng thêm margin-bottom. Việc tách rõ hai khoảng cách này giúp kiểm soát bố cục chính xác hơn.
.title {
padding-bottom: 8px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
Tạo hiệu ứng border-bottom khi di chuột
Kết hợp border-bottom với :hover giúp tạo hiệu ứng phản hồi khi người dùng đưa con trỏ lên liên kết hoặc thành phần tương tác. Đây là cách đơn giản để tăng khả năng nhận biết mà không cần sử dụng hình ảnh hoặc JavaScript.
a {
text-decoration: none;
}
a:hover {
border-bottom: 2px solid #333;
}
Với các thành phần có hiệu ứng chuyển trạng thái, có thể thêm transition để thay đổi diễn ra mượt hơn.
a {
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
}
a:hover {
border-bottom-color: #333;
}
Tùy chỉnh border-bottom theo từng thiết kế
Không nhất thiết phải sử dụng đường viền dưới có độ dày và màu sắc giống nhau cho mọi thành phần. Có thể điều chỉnh kiểu đường viền, độ dày và màu để phù hợp với vai trò của từng khu vực trong giao diện.
Chẳng hạn, đường kẻ mảnh và màu nhạt phù hợp với phần phân cách nội dung, trong khi đường kẻ đậm hơn có thể dùng để nhấn mạnh tiêu đề hoặc trạng thái đang được chọn.
.section-title {
border-bottom: 3px solid #222;
}
.item {
border-bottom: 1px dashed #ddd;
}
.active {
border-bottom: 2px solid #007bff;
}
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-bottom 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 *
