Thuộc tính outline-style trong CSS
Bùi Tấn Lực - 865
- 11/10/2025
Chức năng của Thuộc tính outline-style trong CSS
Thuộc tính outline-style trong CSS dùng để quy định các kiểu đường viền nằm xung quanh thuộc tính border của phần tử HTML input, textarea.
Cú pháp của Thuộc tính outline-style trong CSS
outline-style: giatri;
giatri: Giá trị để quy định các kiểu đường viền nằm xung quanh thuộc tính border của phần tử HTML (Ví dụ: dotted, dashed, double, ridge, solid, groove, inset, outset,....)
Các giá trị của Thuộc tính outline-style trong CSS
dotted: Đường viền hình tròn.
dashed: Đường viền nét đứt.
double: có 2 đường viền cùng màu cách nhau bởi khoảng trắng.
ridge: Đường viền phối khung màu.
solid: Đường viền nét liền.
groove: Đường viền phối khung màu nhưng ngược màu với ridge.
inset:: Chỉ định đường viền chèn 3D, phối thêm một màu so với màu được đưa vào.
outset: Chỉ định đường viền chèn 3D, phối thêm một màu so với màu được đưa vào, ngược với inset.
none: Không có đường viền và khi để chuột vào ô thì cũng không hiện đường viền gì hết.
mặc định: Mặc định không để css outline thì khi để chuột vào sẽ hiện đường viền màu xám.
initial: Đưa giá trị của thuộc tính outline về giá trị mặc định.
inherit: Kế thừa thuộc tính outline từ phần tử cha.
Code Thuộc tính outline-style trong CSS
outline-style: dotted;
outline-style: dashed;
outline-style: double;
outline-style: ridge;
outline-style: solid;
outline-style: groove;
outline-style: inset;
outline-style: outset;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-style 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-width:5px; outline-color:green}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px; outline-width:5px; outline-color:green}
</style>
</head>
<body>
<h1>Code Thuộc tính outline-style trong CSS</h1>
<p>Dùng để quy định các kiểu đường viền nằm xung quanh thuộc tính border của phần tử HTML input, textarea:</p>
<!--dotted-->
<input style="outline-style: dotted;" type="text" placeholder="outline-style: dotted;">
<textarea style="outline-style: dotted;" placeholder="outline-style: dotted;"></textarea>
<!--dashed-->
<input style="outline-style: dashed;" type="text" placeholder="outline-style: dashed;">
<textarea style="outline-style: dashed;" placeholder="outline-style: dashed;"></textarea>
<!--double-->
<input style="outline-style: double;" type="text" placeholder="outline-style: double;">
<textarea style="outline-style: double;" placeholder="outline-style: double;"></textarea>
<!--ridge-->
<input style="outline-style: ridge;" type="text" placeholder="outline-style: ridge;">
<textarea style="outline-style: ridge;" placeholder="outline-style: ridge;"></textarea>
<!--solid-->
<input style="outline-style: solid;" type="text" placeholder="outline-style: solid;">
<textarea style="outline-style: solid;" placeholder="outline-style: solid;"></textarea>
<!--groove-->
<input style="outline-style: groove;" type="text" placeholder="outline-style: groove;">
<textarea style="outline-style: groove;" placeholder="outline-style: groove;"></textarea>
<!--inset-->
<input style="outline-style: inset;" type="text" placeholder="outline-style: inset;">
<textarea style="outline-style: inset;" placeholder="outline-style: inset;"></textarea>
<!--outset-->
<input style="outline-style: outset;" type="text" placeholder="outline-style: outset;">
<textarea style="outline-style: outset;" placeholder="outline-style: outset;"></textarea>
<!--none-->
<input style="outline-style: none;" type="text" placeholder="outline-style: none;">
<textarea style="outline-style: none;" placeholder="outline-style: none;"></textarea>
<!--Không dùng outline-style-->
<input type="text" placeholder="Không dùng outline-style">
<textarea = placeholder="Không dùng outline-style"></textarea>
<!--initial - Đưa giá trị của thuộc tính outline-style về giá trị mặc định-->
<input style="outline-style: initial;" type="text" placeholder="outline-style: initial;">
<textarea style="outline-style: initial;" placeholder="outline-style: initial;"></textarea>
<!--inherit - Kế thừa thuộc tính outline-style từ phần tử cha-->
<input style="outline-style: inherit;" type="text" placeholder="outline-style: inherit;">
<textarea style="outline-style: inherit;" placeholder="outline-style: inherit;"></textarea>
</body>
</html>
Cách chọn outline-style phù hợp khi thiết kế giao diện
Việc chọn outline-style không chỉ dựa vào sở thích về hình thức. Kiểu đường viền nên phù hợp với trạng thái của phần tử, mức độ cần nhấn mạnh và cách người dùng tương tác với giao diện. Chọn đúng kiểu giúp outline dễ nhận biết nhưng không làm bố cục trở nên rối mắt.
Chọn kiểu outline theo trạng thái và mục đích sử dụng
Với các trạng thái cần thu hút sự chú ý như focus, hover hoặc cảnh báo, nên ưu tiên kiểu outline dễ nhận biết như solid hoặc double. Trong khi đó, dashed và dotted phù hợp hơn khi muốn tạo cảm giác nhẹ hoặc phân biệt một khu vực mà không gây chú ý quá mạnh.
Ví dụ, có thể dùng outline liền cho ô nhập liệu đang được chọn để người dùng nhanh chóng nhận biết vị trí thao tác:
.input:focus {
outline-style: solid;
outline-width: 2px;
}
Không nên sử dụng quá nhiều kiểu outline khác nhau trong cùng một giao diện nếu chúng không phục vụ mục đích rõ ràng. Sự nhất quán sẽ giúp người dùng dễ hiểu ý nghĩa của từng trạng thái.
Kết hợp outline-style với outline-width và outline-color
outline-style chỉ quyết định cách đường viền được hiển thị, vì vậy hiệu quả thị giác còn phụ thuộc vào outline-width và outline-color. Một kiểu đường viền phù hợp nhưng có độ dày hoặc màu sắc không hợp lý vẫn có thể khiến giao diện khó nhìn.
Với các thành phần tương tác, nên tạo đủ độ tương phản giữa outline và nền. Chẳng hạn, outline solid có độ rộng vừa phải thường thích hợp cho trạng thái focus, trong khi outline dashed có thể dùng với độ rộng nhỏ hơn để tránh cảm giác quá nặng.
.button:focus {
outline-style: solid;
outline-width: 2px;
outline-color: #333;
}
Khi thay đổi cả ba thuộc tính, nên kiểm tra trực tiếp trên nền sáng, nền tối và các trạng thái tương tác khác nhau. Mục tiêu là làm nổi bật phần tử mà không che khuất nội dung hoặc phá vỡ sự cân đối của giao diện.
Lưu ý khi sử dụng outline cho ô input và textarea
Outline đặc biệt hữu ích với input và textarea vì người dùng cần nhận biết rõ phần tử nào đang được thao tác. Khi thiết kế trạng thái focus, không nên loại bỏ outline một cách tùy tiện nếu chưa tạo ra dấu hiệu thay thế đủ rõ ràng.
Có thể thay đổi kiểu outline khi phần tử nhận focus thay vì xóa hoàn toàn hiệu ứng mặc định:
input:focus,
textarea:focus {
outline-style: dashed;
outline-width: 2px;
outline-color: #555;
}
Nếu giao diện có nhiều trường nhập liệu, nên sử dụng cùng một quy tắc outline cho các phần tử có vai trò tương tự. Cách này tạo ra trải nghiệm nhất quán và giúp người dùng nhanh chóng nhận biết trạng thái đang được chọn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outline-style 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 *
