Thuộc tính outline-color trong CSS
Bùi Tấn Lực - 869
- 11/10/2025
Chức năng của Thuộc tính outline-color trong CSS
Thuộc tính outline-color trong CSS dùng để quy định màu sắc cho đường viền nằm ngoài border của phần tử HTML input, textarea, nó sử dụng nhiều cách quy định màu, màu mặc định hay màu trong suốt.
Cú pháp của Thuộc tính outline-color trong CSS
outline-color: giatri;
giatri: Giá trị để quy định màu sắc cho đường viền nằm ngoài border của phần tử HTML (Ví dụ: green, #0000FF, rgb(201, 76, 76),....)
Code Thuộc tính outline-color trong CSS
outline-color:green;
outline-color:#0000FF;
outline-color:rgb(201, 76, 76);
outline-color:rgba(201, 76, 76, 0.3);
outline-color:hsl(89, 43%, 51%);
outline-color:hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-color trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input{width:100%; height:35px; border:3px solid red; float:left; margin-bottom:20px; outline-style: dotted; outline-width:5px}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px; outline-style: dotted; outline-width:5px}
</style>
</head>
<body>
<h1>Code Thuộc tính outline-color trong CSS</h1>
<p>Dùng để quy định màu sắc cho đường viền nằm ngoài border của phần tử HTML input, textarea, nó sử dụng nhiều cách quy định màu, màu mặc định hay màu trong suốt:</p>
<!--outline-color:green;-->
<input style="outline-color:green;" type="text" placeholder="outline-color:green;">
<textarea style="outline-color:green;" placeholder="outline-color:green;"></textarea>
<!--outline-color:#0000FF;-->
<input style="outline-color:#0000FF;" type="text" placeholder="outline-color:#0000FF;">
<textarea style="outline-color:#0000FF;" placeholder="outline-color:#0000FF;"></textarea>
<!--outline-color:rgb(201, 76, 76);-->
<input style="outline-color:rgb(201, 76, 76);" type="text" placeholder="outline-color:rgb(201, 76, 76);">
<textarea style="outline-color:rgb(201, 76, 76);" placeholder="outline-color:rgb(201, 76, 76);"></textarea>
<!--outline-color:rgba(201, 76, 76, 0.3);-->
<input style="outline-color:rgba(201, 76, 76, 0.3);" type="text" placeholder="outline-color:rgba(201, 76, 76, 0.3);">
<textarea style="outline-color:rgba(201, 76, 76, 0.3);" placeholder="outline-color:rgba(201, 76, 76, 0.3);"></textarea>
<!--outline-color:hsl(89, 43%, 51%);-->
<input style="outline-color:hsl(89, 43%, 51%);" type="text" placeholder="outline-color:hsl(89, 43%, 51%);">
<textarea style="outline-color:hsl(89, 43%, 51%);" placeholder="outline-color:hsl(89, 43%, 51%);"></textarea>
<!--outline-color:hsla(89, 43%, 51%, 0.3);-->
<input style="outline-color:hsla(89, 43%, 51%, 0.3);" type="text" placeholder="outline-color:hsla(89, 43%, 51%, 0.3);">
<textarea style="outline-color:hsla(89, 43%, 51%, 0.3);" placeholder="outline-color:hsla(89, 43%, 51%, 0.3);"></textarea>
<!--outline-color:transparent;-->
<input style="outline-color:transparent;" type="text" placeholder="outline-color:transparent;">
<textarea style="outline-color:transparent;" placeholder="outline-color:transparent;"></textarea>
</body>
</html>
Cách sử dụng outline-color trong CSS hiệu quả
outline-color giúp kiểm soát màu của đường viền ngoài phần tử mà không làm thay đổi kích thước hoặc bố cục xung quanh. Để thuộc tính này hiển thị đúng, nên kết hợp với kiểu outline phù hợp và lựa chọn màu có độ tương phản tốt với nền.
Thay đổi màu outline khi phần tử được focus
Một cách ứng dụng thực tế của outline-color là tạo dấu hiệu trực quan khi người dùng tương tác với ô nhập liệu, nút hoặc liên kết. Có thể kết hợp :focus với màu nổi bật để người dùng dễ nhận biết phần tử đang được chọn.
<input class="input" type="text" placeholder="Nhập thông tin">
<style>
.input:focus {
outline-style: solid;
outline-width: 2px;
outline-color: #2563eb;
}
</style>
Cách này đặc biệt hữu ích với biểu mẫu có nhiều trường nhập liệu. Màu outline nên đủ tương phản với nền nhưng không quá chói, giúp trạng thái focus dễ nhận ra mà vẫn giữ giao diện gọn gàng.
Kết hợp outline-color với outline-style và outline-width
outline-color chỉ quyết định màu sắc, còn hình dạng và độ dày của đường viền được kiểm soát bởi các thuộc tính khác. Vì vậy, khi cần thiết lập outline rõ ràng, nên xác định đồng thời outline-style, outline-width và outline-color.
.box {
outline-style: solid;
outline-width: 3px;
outline-color: #f59e0b;
}
Trong trường hợp muốn viết ngắn gọn, có thể sử dụng thuộc tính outline để khai báo các giá trị liên quan trong cùng một dòng.
.box {
outline: 3px solid #f59e0b;
}
Cách kết hợp này giúp đường outline có độ dày và kiểu hiển thị ổn định, đồng thời màu sắc được kiểm soát rõ ràng theo thiết kế.
Sử dụng màu outline khác nhau cho từng trạng thái
Thay đổi màu outline theo trạng thái giúp giao diện phản hồi trực quan hơn. Chẳng hạn, phần tử có thể dùng một màu khi được focus và màu khác khi xảy ra lỗi, giúp người dùng phân biệt mục đích của từng trạng thái.
.field:focus {
outline: 2px solid #2563eb;
}
.field.error {
outline: 2px solid #dc2626;
}
Không nên sử dụng quá nhiều màu outline trong cùng một giao diện. Mỗi màu nên có ý nghĩa nhất quán, chẳng hạn màu xanh cho trạng thái tương tác và màu đỏ cho cảnh báo, để người dùng nhanh chóng hiểu phản hồi mà giao diện cung cấp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outline-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 *
