Thuộc tính border trong CSS
Trần Thị Vân - 1282
- 12/07/2025
Chức năng của Thuộc tính border trong CSS
Thuộc tính border trong CSS dùng để kẻ đường viề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 trong CSS
border: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền, ví dụ: #ff0000, red,...
Ví dụ Thuộc tính border trong CSS
border: 5px solid green;
border: 5px dotted green;
border: 1px solid #ff0000;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính border 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>Chạy thử Ví dụ Thuộc tính border trong CSS</h1>
<span>Dùng để kẻ đường viề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: 1px solid #ff0000;">border: 1px solid #ff0000;</div>
<div style="border: 5px solid green;">border: 5px solid green;</div>
<div style="border: 5px dotted green;">border: 5px dotted green;</div>
<div style="border: 1px dotted red;">border: 1px dotted red;</div>
<div style="border: 5px double green;">border: 5px double green;</div>
<div style="border: 10px double red;">border: 10px double red;</div>
<div style="border: 5px dashed green;">border: 5px dashed green;</div>
<div style="border: 10px dashed red;">border: 10px dashed red;</div>
<div style="border: 1px inset red;">border: 1px inset red;</div>
<div style="border: 5px inset green;">border: 5px inset green;</div>
<div style="border: 10px inset red;">border: 10px inset red;</div>
<div style="border: 1px outset red;">border: 1px outset red;</div>
<div style="border: 5px outset green;">border: 5px outset green;</div>
<div style="border: 10px outset red;">border: 10px outset red;</div>
<div style="border: 1px ridge red;">border: 1px ridge red;</div>
<div style="border: 5px ridge green;">border: 5px ridge green;</div>
<div style="border: 1px groove red;">border: 1px groove red;</div>
<div style="border: 5px groove green;">border: 5px groove green;</div>
</body>
</html>
Cách tùy chỉnh đường viền CSS theo từng nhu cầu
Trong thực tế, đường viền không chỉ dùng để bao quanh một phần tử mà còn giúp phân chia nội dung, tạo điểm nhấn và xây dựng cấu trúc giao diện rõ ràng. CSS cho phép kết hợp kiểu đường viền, màu sắc và độ dày để tạo ra nhiều cách hiển thị khác nhau.
Thiết lập đường viền cho từng cạnh trong CSS
Mỗi cạnh của phần tử có thể được thiết lập riêng bằng các thuộc tính border-top, border-right, border-bottom và border-left. Cách này phù hợp khi chỉ muốn tạo đường viền ở một hoặc một vài cạnh thay vì bao quanh toàn bộ phần tử.
.box {
border-top: 2px solid #333;
border-bottom: 1px solid #ddd;
}
Ví dụ trên tạo đường viền phía trên và phía dưới, trong khi hai cạnh còn lại không được thiết lập. Đây là cách thường dùng để tạo tiêu đề, phân cách nội dung hoặc làm nổi bật một khu vực trên trang.
Kết hợp màu sắc và kiểu đường viền phù hợp
Kiểu đường viền quyết định cách đường viền xuất hiện, còn màu sắc giúp kiểm soát mức độ nổi bật. Khi kết hợp hai yếu tố này, nên ưu tiên sự hài hòa với nội dung và thiết kế tổng thể thay vì sử dụng quá nhiều màu hoặc kiểu khác nhau.
.notice {
border: 1px dashed #d3801f;
}
Đường viền nét đứt có thể phù hợp với khu vực thông báo hoặc ghi chú. Với các thành phần chính của giao diện, đường viền liền thường tạo cảm giác rõ ràng và ổn định hơn.
Điều chỉnh độ dày đường viền cho phần tử
Độ dày nên được lựa chọn dựa trên vai trò của phần tử. Đường viền mỏng thích hợp để phân chia nội dung, trong khi đường viền dày có thể dùng cho những khu vực cần tạo điểm nhấn.
.card {
border: 1px solid #ccc;
}
.feature {
border: 3px solid #d3801f;
}
Không nên lạm dụng đường viền quá dày vì có thể khiến giao diện nặng nề và làm giảm sự tập trung vào nội dung chính.
Tạo giao diện nổi bật bằng thuộc tính border
Border có thể trở thành một thành phần trực quan của giao diện thay vì chỉ đóng vai trò bao quanh. Khi kết hợp hợp lý với màu sắc, kiểu nét và độ dày, đường viền có thể giúp phân biệt thẻ nội dung, khu vực thông báo hoặc thành phần cần được chú ý.
.card {
border: 1px solid #ddd;
border-left: 4px solid #d3801f;
}
Cách thiết kế này tạo điểm nhấn ở một cạnh mà không làm toàn bộ phần tử trở nên quá nổi bật. Khi áp dụng vào website, nên duy trì cách sử dụng nhất quán để người dùng dễ nhận biết vai trò của từng khu vực.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border 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 *
