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