Thuộc tính border-block-start-color trong CSS
Bùi Tấn Lực - 824
- 05/10/2025
Chức năng của Thuộc tính border-block-start-color trong CSS
Thuộc tính border-block-start-color trong CSS dùng để quy định màu sắc đường viền trên của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-start-style để quy định kiểu đường viền và thuộc tính border-block-start-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-block-start-color trong CSS
border-block-start-color: mausac;
mausac: Màu sắc của đường viền trên, ví dụ: #ff0000, red,...
Code Thuộc tính border-block-start-color trong CSS
border-block-start-color: red;
border-block-start-color: #0000FF;
border-block-start-color: rgb(201, 76, 76);
border-block-start-color: rgba(201, 76, 76, 0.3);
border-block-start-color: hsl(89, 43%, 51%);
border-block-start-color: hsla(89, 43%, 51%, 0.3);
border-block-start-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-start-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-start-width: 5px;border-block-start-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-block-start-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trên của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-start-style để quy định kiểu đường viền và thuộc tính border-block-start-width để quy định chiều rộng cho đường viền:</span>
<div style="border-block-start-color: red;">border-block-start-color: red;</div>
<div style="border-block-start-color: #0000FF;">border-block-start-color: #0000FF;</div>
<div style="border-block-start-color: rgb(201, 76, 76);">border-block-start-color: rgb(201, 76, 76);</div>
<div style="border-block-start-color: rgba(201, 76, 76, 0.3);">border-block-start-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-block-start-color: hsl(89, 43%, 51%);">border-block-start-color: hsl(89, 43%, 51%);</div>
<div style="border-block-start-color: hsla(89, 43%, 51%, 0.3);">border-block-start-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-block-start-color: transparent;">border-block-start-color: transparent;</div>
</body>
</html>
Các lỗi thường gặp khi sử dụng border-block-start-color trong CSS
Khi sử dụng border-block-start-color, lỗi thường không nằm ở giá trị màu mà xuất phát từ việc phần viền đầu theo trục block chưa được thiết lập đầy đủ hoặc bị một quy tắc CSS khác ghi đè. Kiểm tra đúng nguyên nhân sẽ giúp tránh sửa CSS không cần thiết.
Vì sao border-block-start-color không hiển thị như mong muốn?
border-block-start-color chỉ thay đổi màu của cạnh viền block-start, không tự tạo ra độ dày hoặc kiểu viền. Nếu phần tử chưa có border-block-start-style khác none hoặc chưa thiết lập border phù hợp, màu có thể được khai báo nhưng không nhìn thấy trên giao diện.
.box {
border-block-start-color: #2563eb;
border-block-start-style: solid;
border-block-start-width: 2px;
}
Ngoài ra, cần kiểm tra hướng viết của phần tử. Vị trí block-start phụ thuộc vào writing-mode, vì vậy nó không phải lúc nào cũng tương ứng với cạnh trên theo cách hiểu thông thường. Đây là điểm dễ gây nhầm lẫn khi chuyển từ thuộc tính vật lý như border-top-color sang thuộc tính logic.
Cách xử lý khi màu viền bị ghi đè bởi thuộc tính CSS khác
Nếu viền đã xuất hiện nhưng không đúng màu, hãy kiểm tra các quy tắc áp dụng trực tiếp lên phần tử, đặc biệt là border, border-block hoặc các thuộc tính border logic liên quan. Quy tắc có độ ưu tiên cao hơn hoặc được khai báo sau có thể thay đổi màu đã thiết lập trước đó.
.box {
border-block-start: 2px solid #222;
border-block-start-color: #2563eb;
}
Trong trường hợp này, nên đặt các khai báo theo một thứ tự rõ ràng và kiểm tra CSS bằng công cụ dành cho nhà phát triển của trình duyệt. Nếu màu vẫn không đúng, hãy xem phần Computed để xác định chính xác khai báo nào đang có hiệu lự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-start-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 *
