Thuộc tính border-right-color trong CSS
Bùi Tấn Lực - 840
- 06/10/2025
Chức năng của Thuộc tính border-right-color trong CSS
Thuộc tính border-right-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-right-style để quy định kiểu đường viền và thuộc tính border-right-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-right-color trong CSS
border-right-color: mausac;
mausac: Màu sắc của đường viền phải, ví dụ: #ff0000, red,...
Code Thuộc tính border-right-color trong CSS
border-right-color: red;
border-right-color: #0000FF;
border-right-color: rgb(201, 76, 76);
border-right-color: rgba(201, 76, 76, 0.3);
border-right-color: hsl(89, 43%, 51%);
border-right-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-right-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-right-width: 5px;border-right-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-right-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-right-style để quy định kiểu đường viền và thuộc tính border-right-width để quy định chiều rộng cho đường viền:</span>
<div style="border-right-color: red;">border-right-color: red;</div>
<div style="border-right-color: #0000FF;">border-right-color: #0000FF;</div>
<div style="border-right-color: rgb(201, 76, 76);">border-right-color: rgb(201, 76, 76);</div>
<div style="border-right-color: rgba(201, 76, 76, 0.3);">border-right-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-right-color: hsl(89, 43%, 51%);">border-right-color: hsl(89, 43%, 51%);</div>
<div style="border-right-color: hsla(89, 43%, 51%, 0.3);">border-right-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-right-color: transparent;">border-right-color: transparent;</div>
</body>
</html>
Ứng dụng border-right-color trong CSS
border-right-color phát huy hiệu quả khi bạn muốn kiểm soát riêng màu của đường viền bên phải thay vì áp dụng một màu cho toàn bộ khung. Thuộc tính này đặc biệt hữu ích khi thiết kế các thành phần cần tạo điểm nhấn, trạng thái tương tác hoặc phân biệt từng cạnh của phần tử.
Tạo điểm nhấn cho cạnh phải của phần tử
Thay vì để bốn cạnh có cùng màu, bạn có thể dùng border-right-color để làm nổi bật riêng cạnh phải. Cách này phù hợp với hộp thông tin, thẻ nội dung hoặc các khối giao diện cần một dấu hiệu thị giác rõ ràng.
.box {
border: 1px solid #ddd;
border-right-color: #2563eb;
}
Trong ví dụ trên, các cạnh vẫn giữ màu xám, còn cạnh phải chuyển sang màu xanh. Để màu có thể hiển thị, phần tử cần có đường viền với kiểu và độ dày phù hợp.
Kết hợp border-right-color với border-right-style
border-right-color chỉ quyết định màu, còn cách đường viền xuất hiện trên giao diện phụ thuộc vào border-right-style. Kết hợp hai thuộc tính giúp bạn tạo một cạnh phải có kiểu hiển thị riêng mà không ảnh hưởng đến những cạnh còn lại.
.notice {
border: 1px solid #ddd;
border-right-style: solid;
border-right-color: #f59e0b;
}
Cách viết này phù hợp khi cạnh phải cần được nhấn mạnh bằng màu khác nhưng vẫn giữ cấu trúc viền tổng thể của phần tử. Nếu kiểu đường viền được đặt thành none hoặc không tạo ra đường viền, màu đã thiết lập sẽ không tạo thành một đường nhìn thấy được.
Kết hợp border-right-color với border-right-width
Khi cần tạo điểm nhấn rõ hơn, có thể kết hợp màu với độ dày của cạnh phải. border-right-width kiểm soát kích thước đường viền, còn border-right-color xác định màu sắc.
.card {
border: 1px solid #e5e7eb;
border-right-width: 4px;
border-right-color: #16a34a;
}
Thiết lập này tạo một cạnh phải dày và có màu riêng, thích hợp cho các khối trạng thái như thông báo thành công, thông tin nổi bật hoặc nội dung cần được chú ý. Việc chỉ thay đổi cạnh phải giúp giao diện có điểm nhấn mà không làm khung trở nên quá nặng.
Thay đổi màu đường viền phải khi hover
Kết hợp border-right-color với :hover cho phép thay đổi màu cạnh phải khi người dùng đưa con trỏ lên phần tử. Đây là cách đơn giản để tạo phản hồi trực quan cho nút, liên kết hoặc các khối có khả năng tương tác.
.item {
border-right: 3px solid #d1d5db;
}
.item:hover {
border-right-color: #2563eb;
}
Ở trạng thái bình thường, cạnh phải có màu trung tính; khi rê chuột, màu chuyển sang xanh để báo hiệu trạng thái tương tác. Cách triển khai này nên được dùng tiết chế để màu hover thực sự có ý nghĩa và không gây rối mắt khi trang có nhiều phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-right-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 *
