Thuộc tính border-width trong CSS
Bùi Tấn Lực - 858
- 06/10/2025
Chức năng của Thuộc tính border-width trong CSS
Thuộc tính border-width trong CSS dùng để quy định chiều rộng đường viền của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-style để quy định kiểu đường viền và thuộc tính border-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-width trong CSS
border-width: chieurong;
chieurong: Chiều rộng của đường viền, ví dụ 1px, 5px,...
Code Thuộc tính border-width trong CSS
border-width: 5px;
border-width: thin;
border-width: thick;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-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-style: solid;border-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-width trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-style để quy định kiểu đường viền và thuộc tính border-color để quy định màu sắc cho đường viền:</span>
<div style="border-width: 5px;">border-width: 5px;</div>
<div style="border-width: 1px;">border-width: 1px;</div>
<div style="border-width: thin;">border-width: thin;</div>
<div style="border-width: thick;">border-width: thick;</div>
</body>
</html>
Cách sử dụng border-width cho từng cạnh trong CSS
Khi cần tạo viền có độ dày không giống nhau, border-width cho phép thiết lập giá trị riêng cho từng cạnh của phần tử. Cách này hữu ích khi muốn nhấn mạnh một phía của khung hoặc tạo bố cục viền theo thiết kế cụ thể.
Thiết lập border-width cho 4 cạnh
Có thể truyền từ một đến bốn giá trị cho border-width. Nếu chỉ khai báo một giá trị, độ rộng đó được áp dụng cho cả bốn cạnh. Khi sử dụng nhiều giá trị, CSS phân bổ lần lượt theo trên, phải, dưới, trái.
.box {
border-style: solid;
border-width: 2px 4px 6px 8px;
}
Trong ví dụ trên, cạnh trên rộng 2px, cạnh phải 4px, cạnh dưới 6px và cạnh trái 8px. Cách viết này giúp kiểm soát toàn bộ viền trong một khai báo mà không cần tạo nhiều thuộc tính riêng biệt.
Thiết lập độ rộng border-width khác nhau cho từng cạnh
Trong trường hợp mỗi cạnh cần một độ rộng riêng, có thể kết hợp border-width với cách khai báo bốn giá trị. Nếu chỉ muốn thay đổi một hoặc một vài cạnh, việc đặt thuộc tính riêng cho từng phía sẽ dễ đọc và thuận tiện chỉnh sửa hơn.
.box {
border-style: solid;
border-width: 1px;
border-top-width: 4px;
border-bottom-width: 2px;
}
Cách này giữ cho các cạnh còn lại ở độ rộng mặc định đã thiết lập, đồng thời chỉ thay đổi những vị trí cần thiết. Đây là lựa chọn phù hợp khi thiết kế cần tạo điểm nhấn ở cạnh trên hoặc cạnh dưới của một phần tử.
Sử dụng border-top-width, border-right-width, border-bottom-width và border-left-width
Ngoài cách dùng nhiều giá trị trong border-width, CSS còn cung cấp các thuộc tính riêng cho từng cạnh: border-top-width, border-right-width, border-bottom-width và border-left-width.
.box {
border-style: solid;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 5px;
border-left-width: 2px;
}
Cách khai báo này giúp nhìn rõ độ rộng của từng cạnh ngay trong mã CSS, đặc biệt hữu ích với những thành phần có thiết kế viền phức tạp hoặc cần chỉnh sửa thường xuyên.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-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 *
