Thuộc tính border-bottom-style trong CSS
Bùi Tấn Lực - 912
- 06/10/2025
Chức năng của Thuộc tính border-bottom-style trong CSS
Thuộc tính border-bottom-style trong CSS dùng để quy định kiểu đường viền dưới cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-bottom-width để quy định chiều rộng 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-style trong CSS
border-bottom-style: kieuduongvien;
kieuduongvien: Kiểu đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-bottom-style trong CSS
border-bottom-style: solid;
border-bottom-style: dotted;
border-bottom-style: double;
border-bottom-style: dashed;
border-bottom-style: inset;
border-bottom-style: outset;
border-bottom-style: ridge;
border-bottom-style: groove;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-bottom-style 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-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-bottom-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền dưới cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-bottom-width để quy định chiều rộng và thuộc tính border-bottom-color để quy định màu sắc cho đường viền:</span>
<div style="border-bottom-style: solid;">border-bottom-style: solid;</div>
<div style="border-bottom-style: dotted;">border-bottom-style: dotted;</div>
<div style="border-bottom-style: double;">border-bottom-style: double;</div>
<div style="border-bottom-style: dashed;">border-bottom-style: dashed;</div>
<div style="border-bottom-style: inset;">border-bottom-style: inset;</div>
<div style="border-bottom-style: outset;">border-bottom-style: outset;</div>
<div style="border-bottom-style: ridge;">border-bottom-style: ridge;</div>
<div style="border-bottom-style: groove;">border-bottom-style: groove;</div>
<div style="border-bottom-style: none;">border-bottom-style: none;</div>
<div style="border-bottom-style: hidden;">border-bottom-style: hidden;</div>
</body>
</html>
Cách sử dụng border-bottom-style hiệu quả trong CSS
border-bottom-style phát huy hiệu quả tốt nhất khi được sử dụng cùng các thuộc tính xác định độ dày và màu sắc của đường viền. Thay vì chỉ chọn kiểu đường viền, bạn có thể kết hợp các thuộc tính này để tạo đường phân cách phù hợp với từng khu vực của giao diện.
Kết hợp border-bottom-style với border-bottom-width và border-bottom-color
Một đường viền dưới hoàn chỉnh thường cần xác định kiểu đường viền, độ dày và màu sắc. Trong đó, border-bottom-style quyết định cách đường viền hiển thị, border-bottom-width kiểm soát độ dày và border-bottom-color xác định màu.
Ví dụ, có thể tạo một đường viền dưới dạng nét liền, mảnh và màu xám bằng cách khai báo:
.title {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #ddd;
}
Khi cần khai báo ngắn gọn, ba thuộc tính này cũng có thể được thay thế bằng border-bottom. Tuy nhiên, sử dụng riêng từng thuộc tính sẽ thuận tiện hơn khi cần thay đổi một thành phần mà không ảnh hưởng đến các thiết lập còn lại.
Tạo đường phân cách nội dung bằng border-bottom-style
border-bottom-style đặc biệt hữu ích khi cần tạo ranh giới trực quan giữa các phần nội dung. Chẳng hạn, danh sách bài viết, tiêu đề của một khu vực hoặc từng mục trong menu có thể sử dụng đường viền dưới để giúp bố cục dễ theo dõi hơn.
Với nội dung cần phân tách nhẹ nhàng, kiểu solid thường phù hợp. Nếu muốn tạo cảm giác khác biệt hoặc biểu thị một khu vực mang tính phụ trợ, có thể cân nhắc dashed hoặc dotted.
.menu-item {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #e5e5e5;
}
Cách này giúp tạo điểm ngăn cách mà không cần thêm phần tử HTML chỉ để vẽ đường kẻ, đồng thời giữ việc trình bày giao diện nằm trong CSS.
Những lưu ý khi sử dụng border-bottom-style
Cần nhớ rằng border-bottom-style chỉ xác định kiểu hiển thị của đường viền. Nếu không có kiểu đường viền phù hợp, việc thiết lập độ dày hoặc màu sắc sẽ không tạo ra kết quả như mong muốn.
- Chọn kiểu đường viền dựa trên mục đích của thành phần thay vì sử dụng cùng một kiểu cho toàn bộ giao diện.
- Kết hợp với border-bottom-width và border-bottom-color để kiểm soát đầy đủ hình thức đường viền.
- Không nên lạm dụng đường viền dưới vì quá nhiều đường kẻ có thể khiến giao diện trở nên rối mắt.
- Với các khu vực có nhiều nội dung, nên ưu tiên kiểu đường viền đơn giản để giữ khả năng đọc.
Việc lựa chọn đúng border-bottom-style không chỉ giúp đường viền hiển thị đúng kỹ thuật mà còn góp phần tạo hệ thống phân cấp rõ ràng cho giao diện. Khi kết hợp hợp lý với độ dày, màu sắc và khoảng cách của phần tử, đường viền dưới có thể trở thành một chi tiết nhỏ nhưng hữu ích trong thiết kế trang web.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-bottom-style 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 *
