Thuộc tính border-block-end-color trong CSS
Bùi Tấn Lực - 904
- 05/10/2025
Chức năng của Thuộc tính border-block-end-color trong CSS
Thuộc tính border-block-end-color trong CSS dùng để quy định màu sắc đườ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-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-block-end-color trong CSS
border-block-end-color: mausac;
mausac: Màu sắc của đường viền dưới, ví dụ: #ff0000, red,...
Code Thuộc tính border-block-end-color trong CSS
border-block-end-color: red;
border-block-end-color: #0000FF;
border-block-end-color: rgb(201, 76, 76);
border-block-end-color: rgba(201, 76, 76, 0.3);
border-block-end-color: hsl(89, 43%, 51%);
border-block-end-color: hsla(89, 43%, 51%, 0.3);
border-block-end-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-end-color 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-width: 5px;border-block-end-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-block-end-color trong CSS</h1>
<span>Dùng để quy định màu sắc đườ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-width để quy định chiều rộng cho đường viền:</span>
<div style="border-block-end-color: red;">border-block-end-color: red;</div>
<div style="border-block-end-color: #0000FF;">border-block-end-color: #0000FF;</div>
<div style="border-block-end-color: rgb(201, 76, 76);">border-block-end-color: rgb(201, 76, 76);</div>
<div style="border-block-end-color: rgba(201, 76, 76, 0.3);">border-block-end-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-block-end-color: hsl(89, 43%, 51%);">border-block-end-color: hsl(89, 43%, 51%);</div>
<div style="border-block-end-color: hsla(89, 43%, 51%, 0.3);">border-block-end-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-block-end-color: transparent;">border-block-end-color: transparent;</div>
</body>
</html>
Cách sử dụng border-block-end-color kết hợp với các thuộc tính CSS khác
border-block-end-color phát huy hiệu quả tốt hơn khi được dùng cùng các thuộc tính xác định kiểu và độ dày của đường viền. Cách kết hợp này giúp kiểm soát đầy đủ màu sắc, kiểu hiển thị và kích thước của cạnh cuối theo hướng block mà không cần phụ thuộc vào hướng viết cố định.
Kết hợp border-block-end-color với border-block-end-style
border-block-end-style xác định kiểu đường viền, còn border-block-end-color quyết định màu sắc của đường viền đó. Hai thuộc tính có thể dùng cùng nhau để tạo một cạnh viền rõ ràng mà vẫn giữ được khả năng thích ứng với hướng viết của nội dung.
.box {
border-block-end-style: solid;
border-block-end-color: #2563eb;
}
Trong ví dụ trên, cạnh cuối theo trục block được hiển thị bằng đường liền với màu xanh. Nếu chỉ khai báo màu nhưng chưa có kiểu viền phù hợp, đường viền có thể không xuất hiện như mong muốn.
Kết hợp border-block-end-color với border-block-end-width
border-block-end-width kiểm soát độ dày của cạnh viền, trong khi border-block-end-color thiết lập màu. Việc tách riêng hai thuộc tính giúp dễ thay đổi từng đặc điểm mà không ảnh hưởng đến các thiết lập khác.
.box {
border-block-end-width: 3px;
border-block-end-style: solid;
border-block-end-color: #dc2626;
}
Cách viết này phù hợp khi cần tạo đường viền có độ dày cụ thể và màu sắc nổi bật, chẳng hạn để phân tách nội dung hoặc nhấn mạnh phần cuối của một khối.
Kết hợp border-block-end-color với border-block-end
border-block-end là thuộc tính rút gọn cho phép thiết lập kiểu viền, độ dày và màu trong cùng một khai báo. Khi cần thay đổi riêng màu sau đó, có thể đặt border-block-end-color ở phía sau để ghi đè giá trị màu của đường viền.
.box {
border-block-end: 2px solid #111827;
border-block-end-color: #16a34a;
}
Trong trường hợp này, đường viền vẫn giữ độ dày và kiểu đã khai báo trong border-block-end, nhưng màu được thay bằng giá trị của border-block-end-color. Cách kết hợp này hữu ích khi muốn dùng một cấu hình viền chung rồi điều chỉnh màu theo từng thành phần.
Khi nào nên sử dụng border-block-end-color thay cho border-bottom-color
border-bottom-color gắn trực tiếp với cạnh dưới theo cách định hướng vật lý, trong khi border-block-end-color xác định màu cho cạnh cuối của trục block. Vì vậy, lựa chọn thuộc tính nào phụ thuộc vào cách bố trí và hướng viết của giao diện.
Nếu thiết kế chỉ sử dụng cách trình bày ngang thông thường và luôn cần tác động đến cạnh dưới, border-bottom-color có thể dễ hiểu hơn. Ngược lại, border-block-end-color phù hợp với giao diện cần hỗ trợ nhiều hướng viết hoặc muốn CSS mô tả vị trí theo ngữ nghĩa thay vì vị trí vật lý.
Ưu điểm đáng chú ý của cách viết theo logical properties là khi hướng viết thay đổi, quy tắc CSS có thể thích ứng theo trục block mà không phải sửa từng thuộc tính viền vật lý. Đây là lựa chọn đáng cân nhắc khi xây dựng giao diện linh hoạt và có khả năng mở rộng.
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-color 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 *
