Thuộc tính border-top trong CSS
Bùi Tấn Lực - 852
- 05/10/2025
Chức năng của Thuộc tính border-top trong CSS
Thuộc tính border-top trong CSS dùng để kẻ đường viền trên 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-top trong CSS
border-top: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền trên, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền trên ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền trên, ví dụ: #ff0000, red,...
Code Thuộc tính border-top trong CSS
border-top: 1px solid #ff0000;
border-top: 5px dotted green;
border-top: 5px solid green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-top 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-top trong CSS</h1>
<span>Dùng để kẻ đường viền trên 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-top: 1px solid #ff0000;">border-top: 1px solid #ff0000;</div>
<div style="border-top: 5px solid green;">border-top: 5px solid green;</div>
<div style="border-top: 5px dotted green;">border-top: 5px dotted green;</div>
<div style="border-top: 1px dotted red;">border-top: 1px dotted red;</div>
<div style="border-top: 5px double green;">border-top: 5px double green;</div>
<div style="border-top: 10px double red;">border-top: 10px double red;</div>
<div style="border-top: 5px dashed green;">border-top: 5px dashed green;</div>
<div style="border-top: 10px dashed red;">border-top: 10px dashed red;</div>
<div style="border-top: 1px inset red;">border-top: 1px inset red;</div>
<div style="border-top: 5px inset green;">border-top: 5px inset green;</div>
<div style="border-top: 10px inset red;">border-top: 10px inset red;</div>
<div style="border-top: 1px outset red;">border-top: 1px outset red;</div>
<div style="border-top: 5px outset green;">border-top: 5px outset green;</div>
<div style="border-top: 10px outset red;">border-top: 10px outset red;</div>
<div style="border-top: 1px ridge red;">border-top: 1px ridge red;</div>
<div style="border-top: 5px ridge green;">border-top: 5px ridge green;</div>
<div style="border-top: 1px groove red;">border-top: 1px groove red;</div>
<div style="border-top: 5px groove green;">border-top: 5px groove green;</div>
</body>
</html>
Cách sử dụng border-top trong CSS hiệu quả
border-top phát huy hiệu quả khi cần tạo điểm phân cách, nhấn mạnh khu vực nội dung hoặc hoàn thiện bố cục mà không làm thay đổi kích thước tổng thể theo cách khó kiểm soát. Thay vì áp dụng đường viền một cách đồng nhất, bạn có thể kết hợp độ dày, kiểu nét và màu sắc để phù hợp với từng thành phần trên giao diện.
Tạo đường viền trên với các kiểu border-top phổ biến
Kiểu đường viền được quyết định bởi giá trị thứ hai trong khai báo border-top. Một số lựa chọn thường dùng gồm solid cho đường liền, dashed cho đường nét đứt và dotted cho đường chấm. Việc lựa chọn kiểu nét nên dựa trên vai trò của đường viền thay vì chỉ xét yếu tố trang trí.
.box {
border-top: 2px solid #333;
}
.note {
border-top: 1px dashed #999;
}
.separator {
border-top: 2px dotted #666;
}
Đường liền phù hợp với các khu vực cần phân tách rõ ràng, trong khi nét đứt hoặc nét chấm có thể dùng cho những vùng mang tính phụ trợ. Nếu muốn đường viền dễ hòa vào thiết kế, nên ưu tiên độ tương phản vừa phải thay vì sử dụng màu quá nổi bật.
Kết hợp border-top với màu sắc và độ dày
Độ dày và màu sắc ảnh hưởng trực tiếp đến mức độ nổi bật của đường viền. Một đường viền mảnh với màu trung tính thường phù hợp để chia tách các khối nội dung, còn đường viền dày hơn có thể được dùng để tạo điểm nhấn cho tiêu đề hoặc khu vực quan trọng.
.title {
border-top: 3px solid #222;
}
.section {
border-top: 1px solid #ddd;
}
Khi thiết kế giao diện, nên giữ sự nhất quán về độ dày và màu sắc giữa các thành phần có cùng vai trò. Cách này giúp bố cục rõ ràng mà không tạo cảm giác nặng nề hoặc rối mắt.
Tạo hiệu ứng đường viền trên cho từng thành phần
border-top không chỉ dùng để tạo đường phân cách. Khi kết hợp với các thuộc tính khác, nó có thể trở thành một chi tiết giúp nhận diện từng thành phần trong giao diện. Chẳng hạn, đường viền trên có thể được dùng để đánh dấu phần mở đầu của một khối thông tin, làm nổi bật tiêu đề hoặc phân biệt các mục trong danh sách.
.card {
border-top: 4px solid #333;
}
.item {
border-top: 1px solid #ddd;
}
Để hiệu ứng không gây cảm giác rời rạc, nên đặt border-top trong mối liên hệ với khoảng cách giữa các phần tử. Nếu đường viền nằm quá sát nội dung, hãy điều chỉnh padding để tạo khoảng thở hợp lý.
Những lỗi thường gặp khi sử dụng border-top
Một lỗi phổ biến là chỉ khai báo độ dày hoặc màu mà bỏ qua kiểu đường viền. Khi thiếu giá trị border-style phù hợp, đường viền có thể không hiển thị như mong muốn. Ngoài ra, việc sử dụng độ dày quá lớn hoặc màu tương phản mạnh ở nhiều vị trí dễ khiến giao diện mất cân đối.
Cũng cần phân biệt border-top với outline và các hiệu ứng tạo đường kẻ bằng nền. Border thuộc vào mô hình hộp của phần tử, vì vậy việc thêm đường viền có thể ảnh hưởng đến kích thước hoặc cách bố trí tùy theo cách phần tử được tính toán. Kiểm tra cả kích thước thực tế và khoảng cách xung quanh sau khi áp dụng sẽ giúp tránh lỗi bố cục.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-top 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 *
