Thuộc tính border-block-color trong CSS
Bùi Tấn Lực - 869
- 05/10/2025
Chức năng của Thuộc tính border-block-color trong CSS
Thuộc tính border-block-color trong CSS dùng để quy định đường viền trên và đường viền dưới cùng một màu hoặc mỗi đường viền một màu 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-width để quy định chiều rộng 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-color trong CSS
Thuộc tính border-block-color 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 màu, 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-width để quy định chiều rộng cho đường viền:
border-block-color: mausac;
mausac: Màu sắc của đường viền trên và đường viền dưới, ví dụ: #ff0000, red,...
border-block-color: red;
border-block-color: red;border-block-width: 5px 6px;border-block-style: solid double;
border-block-color: #0000FF;
border-block-color: rgb(201, 76, 76);
border-block-color: rgba(201, 76, 76, 0.3);
border-block-color: hsl(89, 43%, 51%);
border-block-color: hsla(89, 43%, 51%, 0.3);
border-block-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-color 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-width: 5px;border-block-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-block-color 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 màu, 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-width để quy định chiều rộng cho đường viền:</span>
<div style="border-block-color: red;">border-block-color: red;</div>
<div style="border-block-color: red;border-block-width: 5px 6px;border-block-style: solid double;">border-block-color: red;border-block-width: 5px 6px;border-block-style: solid double;</div>
<div style="border-block-color: #0000FF;">border-block-color: #0000FF;</div>
<div style="border-block-color: rgb(201, 76, 76);">border-block-color: rgb(201, 76, 76);</div>
<div style="border-block-color: rgba(201, 76, 76, 0.3);">border-block-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-block-color: hsl(89, 43%, 51%);">border-block-color: hsl(89, 43%, 51%);</div>
<div style="border-block-color: hsla(89, 43%, 51%, 0.3);">border-block-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-block-color: transparent;">border-block-color: transparent;</div>
</body>
</html>
Thuộc tính border-block-color cho từng đường viền trong CSS
Dùng để quy định màu sắc đường viền trên ở vị trí 1 và màu sắc đườ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-width để quy định chiều rộng cho đường viền:
border-block-color: mausac1 mausac2;
mausac1: Màu sắc của đường viền trên, ví dụ: #ff0000, red,...
mausac2: Màu sắc của đường viền dưới, ví dụ: #ff0000, red,...
border-block-color: red #0000FF;
border-block-color: red #0000FF;border-block-width: 5px 5px;border-block-style: solid double;
border-block-color: #FFD700 green;
border-block-color: red green;
border-block-color: rgb(201, 76, 76) green
border-block-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)
border-block-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)
border-block-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)
border-block-color: transparent hsl(89, 43%, 51%)
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-color 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-width: 5px;border-block-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-block-color cho từng đường viền trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trên ở vị trí 1 và màu sắc đườ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-width để quy định chiều rộng cho đường viền:</span>
<div style="border-block-color: red #0000FF;">border-block-color: red #0000FF;</div>
<div style="border-block-color: red #0000FF;border-block-width: 5px 5px;border-block-style: solid double;">border-block-color: red #0000FF;border-block-width: 5px 5px;border-block-style: solid double;</div>
<div style="border-block-color: #FFD700 green;">border-block-color: #FFD700 green;</div>
<div style="border-block-color: red green;">border-block-color: red green;</div>
<div style="border-block-color: rgb(201, 76, 76) green">border-block-color: rgb(201, 76, 76) green</div>
<div style="border-block-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)">border-block-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)</div>
<div style="border-block-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)">border-block-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-block-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)">border-block-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-block-color: transparent hsl(89, 43%, 51%)">border-block-color: transparent hsl(89, 43%, 51%)</div>
</body>
</html>
Khi nào nên sử dụng border-block-color trong CSS?
border-block-color phù hợp khi bạn muốn kiểm soát màu của đường viền theo hướng block thay vì cố định vào cạnh trên hoặc cạnh dưới. Cách viết này đặc biệt hữu ích với các giao diện có nhiều hướng viết hoặc cần thích ứng linh hoạt với cách bố trí nội dung.
border-block-color phù hợp với bố cục CSS nào?
Thuộc tính này phù hợp với các bố cục sử dụng CSS Logical Properties, trong đó vị trí đường viền được xác định theo hướng block của phần tử. Nhờ vậy, cùng một quy tắc CSS có thể hoạt động linh hoạt hơn khi bố cục thay đổi.
Trong thực tế, border-block-color có thể được dùng để tạo điểm nhấn cho các khối nội dung, phân tách từng phần của giao diện hoặc thay đổi màu viền mà không phải khai báo riêng từng cạnh. Đây là lựa chọn đáng cân nhắc khi muốn CSS dễ mở rộng và ít phụ thuộc vào hướng hiển thị cụ thể.
border-block-color khác gì border-top-color và border-bottom-color?
border-top-color và border-bottom-color nhắm trực tiếp đến cạnh trên và cạnh dưới của phần tử. Trong khi đó, border-block-color làm việc theo trục block, nên hai cạnh mà nó tác động phụ thuộc vào writing-mode của phần tử.
Vì vậy, nếu giao diện chỉ sử dụng bố cục thông thường và luôn xác định rõ cạnh cần thay đổi, border-top-color hoặc border-bottom-color có thể dễ hiểu hơn. Ngược lại, border-block-color mang lại lợi thế khi xây dựng giao diện cần thích ứng với nhiều hướng viết hoặc muốn sử dụng hệ thuộc tính CSS logic.
Ưu điểm của border-block-color khi xây dựng giao diện đa hướng
Điểm mạnh của border-block-color nằm ở khả năng tách quy tắc thiết kế khỏi vị trí vật lý cố định của cạnh. Khi hướng viết thay đổi, CSS vẫn có thể xác định đúng nhóm cạnh theo trục block mà không cần viết lại toàn bộ quy tắc màu viền.
Cách tiếp cận này giúp mã CSS nhất quán hơn, đặc biệt trong các giao diện hỗ trợ nhiều ngôn ngữ hoặc có bố cục cần thay đổi theo ngữ cảnh. Khi kết hợp với các thuộc tính logic khác, border-block-color cũng giúp việc xây dựng và bảo trì giao diện trở nên thuận tiện 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-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 *
