Thuộc tính border-block-width trong CSS
Bùi Tấn Lực - 870
- 05/10/2025
Chức năng của Thuộc tính border-block-width trong CSS
Thuộc tính border-block-width trong CSS dùng để quy định đường viền trên và đường viền dưới cùng một chiều rộng hoặc mỗi đường viền một chiều rộng riêng, thuộc tính này kết hợp với thuộc tính border-block-style để quy định kiểu đường viền và thuộc tính border-block-color để quy định màu sắc cho cả 2 đường viền trên và dưới hoặc từng đường viền riêng.
Code Thuộc tính border-block-width trong CSS
Thuộc tính border-block-width cho 2 đường viền trong CSS
Dùng để quy định đường viền trên và đường viền dưới cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-block-style để quy định kiểu đường viền và thuộc tính border-block-color để quy định màu sắc cho đường viền:
border-block-width: chieurong;
chieurong: Chiều rộng của đường viền trên và đường viền dưới, ví dụ 1px, 5px,...
border-block-width: 5px;
border-block-width: 5px;border-block-style: solid double;border-block-color: #FFD700 green;
border-block-width: 1px;
border-block-width: thin;
border-block-width: thick;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-width cho 2 đường viền 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-block-style: solid;border-block-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-block-width cho 2 đường viền trong CSS</h1>
<span>Dùng để quy định đường viền trên và đường viền dưới cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-block-style để quy định kiểu đường viền và thuộc tính border-block-color để quy định màu sắc cho đường viền:</span>
<div style="border-block-width: 5px;">border-block-width: 5px;</div>
<div style="border-block-width: 5px;border-block-style: solid double;border-block-color: #FFD700 green;">border-block-width: 5px;border-block-style: solid double;border-block-color: #FFD700 green;</div>
<div style="border-block-width: 1px;">border-block-width: 1px;</div>
<div style="border-block-width: thin;">border-block-width: thin;</div>
<div style="border-block-width: thick;">border-block-width: thick;</div>
</body>
</html>
Thuộc tính border-block-width cho từng đường viền trong CSS
Dùng để quy định chiều rộng đường viền trên ở vị trí 1 và chiều rộng đường viền dưới ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-block-style để quy định kiểu đường viền và thuộc tính border-block-color để quy định màu sắc cho đường viền:
border-block-width: chieurong1 chieurong2;
chieurong1: Chiều rộng của đường viền trên, ví dụ 1px, 5px,...
chieurong2: Chiều rộng của đường viền dưới, ví dụ 1px, 5px,...
border-block-width: 5px 1px;
border-block-width: 5px 6px;border-block-style: solid double;border-block-color: #FFD700 green;
border-block-width: 1px 5px;
border-block-width: thin 5px;
border-block-width: thick thin;
border-block-width: thin thick;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-width cho từng đường viền 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-block-style: solid;border-block-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-block-width cho từng đường viền trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền trên ở vị trí 1 và chiều rộng đường viền dưới ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-block-style để quy định kiểu đường viền và thuộc tính border-block-color để quy định màu sắc cho đường viền:</span>
<div style="border-block-width: 5px 1px;">border-block-width: 5px 1px;</div>
<div style="border-block-width: 5px 6px;border-block-style: solid double;border-block-color: #FFD700 green;">border-block-width: 5px 6px;border-block-style: solid double;border-block-color: #FFD700 green;</div>
<div style="border-block-width: 1px 5px;">border-block-width: 1px 5px;</div>
<div style="border-block-width: thin 5px;">border-block-width: thin 5px;</div>
<div style="border-block-width: thick thin;">border-block-width: thick thin;</div>
<div style="border-block-width: thin thick;">border-block-width: thin thick;</div>
</body>
</html>
Ứng dụng thuộc tính border-block-width trong CSS
Thuộc tính border-block-width phù hợp khi cần kiểm soát độ rộng đường viền theo hướng block mà không phải chỉ định riêng từng cạnh. Cách viết này đặc biệt hữu ích khi giao diện cần hỗ trợ nhiều kiểu hướng văn bản hoặc muốn giữ CSS nhất quán.
Tạo đường viền trên và dưới đồng nhất
Khi sử dụng border-block-width với một giá trị, độ rộng đó được áp dụng cho cả hai cạnh thuộc hướng block. Trong bố cục thông thường, đây là cạnh trên và cạnh dưới của phần tử.
.box {
border-block-width: 2px;
border-block-style: solid;
}
Cách này giúp tạo các đường phân cách có độ dày giống nhau mà không cần khai báo border-top-width và border-bottom-width riêng biệt.
Tạo đường viền trên và dưới có độ rộng khác nhau
Hai giá trị có thể được sử dụng để thiết lập độ rộng riêng cho hai cạnh theo hướng block. Giá trị đầu tiên áp dụng cho cạnh bắt đầu, giá trị thứ hai áp dụng cho cạnh kết thúc.
.box {
border-block-width: 4px 1px;
border-block-style: solid;
}
Trong trường hợp này, cạnh bắt đầu có độ rộng 4px, còn cạnh kết thúc có độ rộng 1px. Cách viết này thích hợp khi muốn tạo điểm nhấn ở một phía mà vẫn giữ cấu trúc CSS ngắn gọn.
Kết hợp border-block-width với border-block-style và border-block-color
border-block-width chỉ quyết định độ rộng, vì vậy để đường viền hiển thị đầy đủ cần kết hợp với kiểu và màu viền. Ba thuộc tính có thể được khai báo độc lập để dễ kiểm soát từng thành phần.
.box {
border-block-width: 2px;
border-block-style: solid;
border-block-color: #333;
}
Cách tổ chức này giúp thay đổi độ dày, kiểu hoặc màu đường viền mà không ảnh hưởng đến các thiết lập khác. Khi xây dựng giao diện có nhiều thành phần dùng chung một quy tắc, đây cũng là cách dễ bảo trì hơn.
Sử dụng border-block-width trong thiết kế giao diện Responsive
Trong giao diện Responsive, border-block-width có thể được điều chỉnh theo kích thước màn hình để thay đổi mức độ nhấn mạnh của đường viền. Thuộc tính này cũng tránh việc phải phụ thuộc trực tiếp vào tên cạnh trên hoặc dưới.
.card {
border-block-width: 1px;
border-block-style: solid;
}
@media (min-width: 768px) {
.card {
border-block-width: 2px;
}
}
Với cách này, đường viền có thể mảnh hơn trên màn hình nhỏ và rõ hơn ở màn hình lớn. Khi kết hợp cùng các thuộc tính logical khác, CSS sẽ linh hoạt hơn trong những giao diện có nhiều kiểu 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-block-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 *
