Thuộc tính border-inline-color trong CSS
Bùi Tấn Lực - 861
- 06/10/2025
Chức năng của Thuộc tính border-inline-color trong CSS
Thuộc tính border-inline-color trong CSS dùng để quy định đường viền trái và đường viền phả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-inline-style để quy định kiểu đường viền và thuộc tính border-inline-width để quy định chiều rộng cho cả 2 đường viền trái và phải hoặc từng đường viền riêng.
Code Thuộc tính border-inline-color trong CSS
Thuộc tính border-inline-color cho 2 đường viền trong CSS
Dùng để quy định đường viền trái và đường viền phải cùng một màu, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-width để quy định chiều rộng cho đường viền:
border-inline-color: mausac;
mausac: Màu sắc của đường viền trái và đường viền phải, ví dụ: #ff0000, red,...
border-inline-color: red;
border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;
border-inline-color: #0000FF;
border-inline-color: rgb(201, 76, 76);
border-inline-color: rgba(201, 76, 76, 0.3);
border-inline-color: hsl(89, 43%, 51%);
border-inline-color: hsla(89, 43%, 51%, 0.3);
border-inline-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-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-inline-width: 5px;border-inline-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-color cho 2 đường viền trong CSS</h1>
<span>Dùng để quy định đường viền trái và đường viền phải cùng một màu, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-width để quy định chiều rộng cho đường viền:</span>
<div style="border-inline-color: red;">border-inline-color: red;</div>
<div style="border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;">border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;</div>
<div style="border-inline-color: #0000FF;">border-inline-color: #0000FF;</div>
<div style="border-inline-color: rgb(201, 76, 76);">border-inline-color: rgb(201, 76, 76);</div>
<div style="border-inline-color: rgba(201, 76, 76, 0.3);">border-inline-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-inline-color: hsl(89, 43%, 51%);">border-inline-color: hsl(89, 43%, 51%);</div>
<div style="border-inline-color: hsla(89, 43%, 51%, 0.3);">border-inline-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-inline-color: transparent;">border-inline-color: transparent;</div>
</body>
</html>
Thuộc tính border-inline-color cho từng đường viền trong CSS
Dùng để quy định màu sắc đường viền trái ở vị trí 1 và màu sắc đường viền phải ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-width để quy định chiều rộng cho đường viền:
border-inline-color: mausac1 mausac2;
mausac1: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
mausac2: Màu sắc của đường viền phải, ví dụ: #ff0000, red,...
border-inline-color: red #0000FF;
border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;
border-inline-color: #FFD700 green;
border-inline-color: red green;
border-inline-color: rgb(201, 76, 76) green;
border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3);
border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%);
border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%);
border-inline-color: transparent hsl(89, 43%, 51%)
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-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-inline-width: 5px;border-inline-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-color cho từng đường viền trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trái ở vị trí 1 và màu sắc đường viền phải ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-width để quy định chiều rộng cho đường viền:</span>
<div style="border-inline-color: red #0000FF;">border-inline-color: red #0000FF;</div>
<div style="border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;">border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;</div>
<div style="border-inline-color: #FFD700 green;">border-inline-color: #FFD700 green;</div>
<div style="border-inline-color: red green;">border-inline-color: red green;</div>
<div style="border-inline-color: rgb(201, 76, 76) green">border-inline-color: rgb(201, 76, 76) green</div>
<div style="border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)">border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)</div>
<div style="border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)">border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)">border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-inline-color: transparent hsl(89, 43%, 51%)">border-inline-color: transparent hsl(89, 43%, 51%)</div>
</body>
</html>
Ứng dụng border-inline-color trong thiết kế giao diện thực tế
border-inline-color phù hợp khi cần kiểm soát màu của hai đường viền nằm trên trục inline mà không phải cố định theo hướng trái hoặc phải. Cách tiếp cận này đặc biệt hữu ích khi giao diện có thể thay đổi hướng viết hoặc được xây dựng theo tư duy CSS Logical Properties.
Tạo điểm nhấn cho nội dung và thành phần giao diện
Có thể dùng border-inline-color để tạo điểm nhấn cho các khối thông tin như ghi chú, thông báo, thẻ nội dung hoặc vùng được chọn. Thay vì thiết lập riêng màu viền ở từng phía, một khai báo duy nhất giúp giao diện gọn hơn và dễ điều chỉnh.
.notice {
border-inline: 4px solid;
border-inline-color: #2563eb;
}
Cách này thích hợp khi phần viền cần đóng vai trò nhận diện trực quan nhưng không muốn ảnh hưởng đến cấu trúc hoặc kích thước của thành phần. Khi thay đổi màu chủ đạo của giao diện, chỉ cần cập nhật giá trị màu mà không phải sửa từng cạnh viền.
Kết hợp border-inline-color với border-block-color
Khi muốn kiểm soát màu viền theo cả hai trục, có thể kết hợp border-inline-color với border-block-color. Hai thuộc tính này giúp phân biệt rõ phần viền theo trục inline và trục block, phù hợp với các thành phần có nhiều kiểu nhấn mạnh.
.card {
border: 2px solid;
border-inline-color: #2563eb;
border-block-color: #d1d5db;
}
Trong ví dụ trên, hai phía thuộc trục inline sử dụng màu xanh, còn hai phía thuộc trục block sử dụng màu xám. Cách tổ chức này giúp mã CSS thể hiện rõ ý đồ thiết kế và thuận tiện khi cần thay đổi từng nhóm viền độc lập.
Sử dụng border-inline-color trong bố cục hỗ trợ nhiều hướng viết
Một ưu điểm đáng chú ý của border-inline-color là không gắn cách thiết lập viền với tên cạnh vật lý như left hoặc right. Vì vậy, thuộc tính này phù hợp với giao diện có khả năng sử dụng nhiều hướng viết hoặc cần thích ứng với các bố cục khác nhau.
Thay vì xác định trực tiếp màu cho từng cạnh, nhà phát triển chỉ cần mô tả màu của trục inline. Trình duyệt sẽ xác định cạnh tương ứng dựa trên ngữ cảnh hướng viết của phần tử. Điều này giúp giảm các quy tắc CSS phải viết riêng cho từng bố cục và làm cho giao diện linh hoạt hơn khi 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-inline-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 *
