Thuộc tính border-block-end-width trong CSS
Bùi Tấn Lực - 851
- 05/10/2025
Chức năng của Thuộc tính border-block-end-width trong CSS
Thuộc tính border-block-end-width trong CSS dùng để quy định chiều rộng đường viền dưới của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-end-style để quy định kiểu đường viền và thuộc tính border-block-end-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-block-end-width trong CSS
border-block-end-width: chieurong;
chieurong: Chiều rộng của đường viền dưới, ví dụ 1px, 5px,...
Code Thuộc tính border-block-end-width trong CSS
border-block-end-width: 5px;
border-block-end-width: 1px;
border-block-end-width: thin;
border-block-end-width: thick;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-end-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-block-end-style: solid;border-block-end-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-block-end-width trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền dưới của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-end-style để quy định kiểu đường viền và thuộc tính border-block-end-color để quy định màu sắc cho đường viền:</span>
<div style="border-block-end-width: 5px;">border-block-end-width: 5px;</div>
<div style="border-block-end-width: 1px;">border-block-end-width: 1px;</div>
<div style="border-block-end-width: thin;">border-block-end-width: thin;</div>
<div style="border-block-end-width: thick;">border-block-end-width: thick;</div>
</body>
</html>
Ứng dụng Thuộc tính border-block-end-width trong CSS
border-block-end-width phù hợp khi cần kiểm soát độ dày của đường viền ở cạnh cuối theo hướng khối của phần tử. Thuộc tính này đặc biệt hữu ích trong bố cục hỗ trợ nhiều hướng viết, vì vị trí cạnh được xác định theo block flow thay vì cố định vào cạnh dưới.
Trong thiết kế thực tế, có thể dùng thuộc tính này để tạo điểm nhấn cho tiêu đề, phân tách các khu vực nội dung hoặc điều chỉnh độ nổi bật của đường viền mà không phải thay đổi các cạnh còn lại.
Kết hợp border-block-end-width với border-block-end-style
border-block-end-width chỉ xác định độ dày, vì vậy cần kết hợp với border-block-end-style để lựa chọn kiểu đường viền. Đây là cách sử dụng phù hợp khi muốn kiểm soát riêng cạnh cuối mà không tác động đến các cạnh khác.
Ví dụ, đoạn CSS dưới đây tạo đường viền liền có độ dày 3px ở cạnh block-end:
.title {
border-block-end-width: 3px;
border-block-end-style: solid;
}
Nếu chỉ thiết lập border-block-end-width mà không có kiểu đường viền phù hợp, đường viền có thể không xuất hiện như mong muốn. Vì vậy, khi xây dựng một đường viền hoàn chỉnh, nên xác định đồng thời độ dày và kiểu hiển thị.
Kết hợp border-block-end-width với border-block-end-color
Khi cần tạo đường phân cách có màu sắc riêng, có thể kết hợp border-block-end-width với border-block-end-color. Cách này giúp tách biệt rõ ba yếu tố: độ dày, kiểu và màu của đường viền.
.section-title {
border-block-end-width: 2px;
border-block-end-style: solid;
border-block-end-color: #333;
}
Việc thiết lập từng thuộc tính riêng giúp dễ thay đổi giao diện về sau. Chẳng hạn, có thể tăng độ dày để tạo điểm nhấn mà không cần thay đổi màu hoặc kiểu đường viền.
Tạo đường viền cuối phần tử theo từng thiết kế
border-block-end-width có thể được điều chỉnh tùy theo vai trò của từng thành phần. Đường viền mảnh phù hợp với khu vực cần phân cách nhẹ, trong khi đường viền dày hơn có thể dùng để nhấn mạnh tiêu đề hoặc một khối thông tin quan trọng.
.card {
border-block-end-width: 1px;
border-block-end-style: solid;
}
.feature {
border-block-end-width: 4px;
border-block-end-style: solid;
}
Cách triển khai này giúp giao diện có cấp độ thị giác rõ ràng hơn mà vẫn giữ được khả năng kiểm soát từng cạnh. Khi sử dụng cùng các thuộc tính logical khác, thiết kế cũng dễ thích ứng với những bố cục có hướng viết khác nhau.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block-end-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 *
