Thuộc tính border-block-end trong CSS
Bùi Tấn Lực - 842
- 05/10/2025
Chức năng của Thuộc tính border-block-end trong CSS
Thuộc tính border-block-end trong CSS dùng để kẻ đường viền dưới 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-block-end trong CSS
border-block-end: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền dưới, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền dưới, ví dụ: #ff0000, red,...
Code Thuộc tính border-block-end trong CSS
border-block-end: 1px solid #ff0000;
border-block-end: 5px solid green;
border-block-end: 5px dotted green;
border-block-end: 1px dotted red;
border-block-end: 5px double green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-end 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-block-end trong CSS</h1>
<span>Dùng để kẻ đường viền dưới 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-block-end: 1px solid #ff0000;">border-block-end: 1px solid #ff0000;</div>
<div style="border-block-end: 5px solid green;">border-block-end: 5px solid green;</div>
<div style="border-block-end: 5px dotted green;">border-block-end: 5px dotted green;</div>
<div style="border-block-end: 1px dotted red;">border-block-end: 1px dotted red;</div>
<div style="border-block-end: 5px double green;">border-block-end: 5px double green;</div>
<div style="border-block-end: 10px double red;">border-block-end: 10px double red;</div>
<div style="border-block-end: 5px dashed green;">border-block-end: 5px dashed green;</div>
<div style="border-block-end: 10px dashed red;">border-block-end: 10px dashed red;</div>
<div style="border-block-end: 1px inset red;">border-block-end: 1px inset red;</div>
<div style="border-block-end: 5px inset green;">border-block-end: 5px inset green;</div>
<div style="border-block-end: 10px inset red;">border-block-end: 10px inset red;</div>
<div style="border-block-end: 1px outset red;">border-block-end: 1px outset red;</div>
<div style="border-block-end: 5px outset green;">border-block-end: 5px outset green;</div>
<div style="border-block-end: 10px outset red;">border-block-end: 10px outset red;</div>
<div style="border-block-end: 1px ridge red;">border-block-end: 1px ridge red;</div>
<div style="border-block-end: 5px ridge green;">border-block-end: 5px ridge green;</div>
<div style="border-block-end: 1px groove red;">border-block-end: 1px groove red;</div>
<div style="border-block-end: 5px groove green;">border-block-end: 5px groove green;</div>
</body>
</html>
Cách sử dụng border-block-end trong CSS hiệu quả
border-block-end phát huy hiệu quả khi cần tạo đường viền ở cạnh cuối của một phần tử mà không muốn phụ thuộc trực tiếp vào hướng trái, phải, trên hoặc dưới. Cách tiếp cận này đặc biệt hữu ích khi xây dựng giao diện có khả năng thích ứng với nhiều cách trình bày nội dung.
Tạo đường viền cuối cho từng phần tử
Để tạo đường viền ở cạnh cuối, có thể khai báo border-block-end cùng kiểu đường viền và độ dày mong muốn. Cách viết này giúp xác định cạnh cần trang trí theo luồng hiển thị của nội dung thay vì gắn cố định với một phía cụ thể.
.item {
border-block-end: 1px solid #ddd;
}
Cách này phù hợp với danh sách, tiêu đề, các khối nội dung hoặc từng mục trong giao diện cần có đường phân cách. Khi nhiều phần tử dùng chung quy tắc, việc quản lý CSS cũng trở nên nhất quán hơn.
Kết hợp border-block-end với border-block-end-width và border-block-end-style
Khi cần kiểm soát từng thành phần của đường viền, có thể tách border-block-end thành các thuộc tính chuyên biệt. border-block-end-width kiểm soát độ dày, còn border-block-end-style xác định kiểu đường viền.
.box {
border-block-end-width: 2px;
border-block-end-style: solid;
}
Cách tách thuộc tính phù hợp khi giao diện cần thay đổi riêng độ dày hoặc kiểu đường viền trong từng trạng thái. Nếu không cần kiểm soát chi tiết, cú pháp rút gọn border-block-end thường dễ đọc và ngắn gọn hơn.
Sử dụng border-block-end trong thiết kế responsive
border-block-end thuộc nhóm thuộc tính logical trong CSS nên hướng của đường viền được xác định dựa trên cách nội dung được bố trí. Đây là ưu điểm đáng chú ý khi thiết kế giao diện cần hoạt động linh hoạt với các chế độ viết khác nhau.
Thay vì phải tạo nhiều quy tắc cho từng hướng hiển thị, có thể sử dụng một quy tắc logical để giảm sự phụ thuộc vào các thuộc tính vật lý như border-bottom. Điều này giúp CSS dễ mở rộng hơn khi cấu trúc giao diện thay đổi.
Những lỗi thường gặp khi sử dụng border-block-end
- Nhầm với border-bottom: hai thuộc tính không hoàn toàn giống nhau về cách xác định cạnh áp dụng, đặc biệt khi thay đổi writing mode.
- Chỉ khai báo độ dày: nếu thiếu kiểu đường viền phù hợp, đường viền có thể không hiển thị như mong muốn.
- Dùng quá nhiều quy tắc chồng chéo: việc đồng thời thiết lập border-block-end và các thuộc tính border khác có thể khiến kết quả khó kiểm soát.
- Bỏ qua ngữ cảnh hiển thị: cần kiểm tra writing mode khi giao diện sử dụng cách trình bày nội dung khác với mặc định.
Để sử dụng border-block-end hiệu quả, nên ưu tiên nó khi mục tiêu là tạo đường viền theo hướng logic của nội dung. Với giao diện đơn giản chỉ cần cố định đường viền phía dưới, thuộc tính vật lý tương ứng có thể vẫn là lựa chọn dễ hiểu hơn.
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 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 *
