Thuộc tính border-inline-start-color trong CSS
Bùi Tấn Lực - 816
- 06/10/2025
Chức năng của Thuộc tính border-inline-start-color trong CSS
Thuộc tính border-inline-start-color trong CSS dùng để quy định màu sắc đường viền trái của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-start-style để quy định kiểu đường viền và thuộc tính border-inline-start-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-inline-start-color trong CSS
border-inline-start-color: mausac;
mausac: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
Code Thuộc tính border-inline-start-color trong CSS
border-inline-start-color: red;
border-inline-start-color: #0000FF;
border-inline-start-color: rgb(201, 76, 76);
border-inline-start-color: rgba(201, 76, 76, 0.3);
border-inline-start-color: hsl(89, 43%, 51%);
border-inline-start-color: hsla(89, 43%, 51%, 0.3);
border-inline-start-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-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-inline-start-width: 5px;border-inline-start-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-inline-start-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trái của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-start-style để quy định kiểu đường viền và thuộc tính border-inline-start-width để quy định chiều rộng cho đường viền:</span>
<div style="border-inline-start-color: red;">border-inline-start-color: red;</div>
<div style="border-inline-start-color: #0000FF;">border-inline-start-color: #0000FF;</div>
<div style="border-inline-start-color: rgb(201, 76, 76);">border-inline-start-color: rgb(201, 76, 76);</div>
<div style="border-inline-start-color: rgba(201, 76, 76, 0.3);">border-inline-start-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-inline-start-color: hsl(89, 43%, 51%);">border-inline-start-color: hsl(89, 43%, 51%);</div>
<div style="border-inline-start-color: hsla(89, 43%, 51%, 0.3);">border-inline-start-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-inline-start-color: transparent;">border-inline-start-color: transparent;</div>
</body>
</html>
Cách sử dụng border-inline-start-color hiệu quả trong CSS
Thuộc tính border-inline-start-color phát huy hiệu quả nhất khi được sử dụng cùng các thuộc tính xác định độ dày và kiểu đường viền. Cách kết hợp này giúp kiểm soát đầy đủ phần viền ở cạnh bắt đầu của trục inline mà không phải phụ thuộc trực tiếp vào hướng trái hoặc phải.
Kết hợp border-inline-start-color với border-inline-start-style và border-inline-start-width
Để tạo một đường viền hoàn chỉnh, có thể phối hợp border-inline-start-color với border-inline-start-style và border-inline-start-width. Trong đó, màu sắc quyết định diện mạo, kiểu viền xác định dạng đường kẻ và độ rộng quyết định kích thước hiển thị.
Ví dụ, một hộp nội dung có thể tạo điểm nhấn bằng đường viền màu ở cạnh bắt đầu như sau:
.box {
border-inline-start-width: 4px;
border-inline-start-style: solid;
border-inline-start-color: #2563eb;
}
Cách viết này dễ bảo trì hơn khi từng thành phần của đường viền cần được điều chỉnh riêng. Nếu muốn thay đổi màu theo trạng thái giao diện, chỉ cần cập nhật giá trị của border-inline-start-color mà không ảnh hưởng đến độ rộng hay kiểu đường viền.
Ứng dụng border-inline-start-color cho giao diện hỗ trợ nhiều hướng viết
Điểm đáng chú ý của border-inline-start-color nằm ở khả năng làm việc theo hướng viết của nội dung. Thay vì cố định màu cho cạnh trái hoặc cạnh phải, thuộc tính xác định màu cho cạnh nằm ở phía bắt đầu của trục inline.
Điều này đặc biệt hữu ích khi xây dựng giao diện có thể thay đổi direction. Một kiểu CSS có thể được dùng chung cho nhiều bố cục mà không cần viết thêm quy tắc riêng chỉ để đổi giữa hai cạnh.
.notice {
border-inline-start: 4px solid;
border-inline-start-color: #16a34a;
}
Nhờ cách tiếp cận này, thành phần thông báo, chú thích hoặc khối nội dung được thiết kế theo logic của văn bản thay vì phụ thuộc vào vị trí vật lý của cạnh. Đây là lựa chọn phù hợp khi website cần hỗ trợ nhiều ngôn ngữ hoặc các bố cục có hướng đọc 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-inline-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 *
