Thuộc tính outline-width trong CSS
Bùi Tấn Lực - 863
- 11/10/2025
Chức năng của Thuộc tính outline-width trong CSS
Thuộc tính outline-width trong CSS dùng để quy định độ rộng của đường viền chạy 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-width trong CSS
outline-width: giatri;
giatri: Giá trị để quy định độ rộng của đường viền chạy xung quanh thuộc tính border của phần tử HTML (Ví dụ: 5px, medium, thin, thick,...)
Các giá trị của Thuộc tính outline-width trong CSS
px: Là các con số theo px, ví dụ 3px, 5px, 7px.
medium: Độ rộng trung bình.
thin: Độ rộng cực nhỏ.
thick: Độ rộng lớn.
initial: Đưa giá trị của thuộc tính outline-style về giá trị mặc định
inherit: Kế thừa thuộc tính outline-style từ phần tử cha
Code Thuộc tính outline-width trong CSS
outline-width:5px;
outline-width:medium;
outline-width:thin;
outline-width:thick;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-width 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-color:green}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px; outline-style: dotted; outline-color:green}
</style>
</head>
<body>
<h1>Code Thuộc tính outline-width trong CSS</h1>
<p>Dùng để quy định độ rộng của đường viền chạy xung quanh thuộc tính border của phần tử HTML input, textarea:</p>
<!--outline-width:5px;-->
<input style="outline-width:5px;" type="text" placeholder="outline-width:5px;">
<textarea style="outline-width:5px;" placeholder="outline-width:5px;"></textarea>
<!--outline-width:10px;-->
<input style="outline-width:10px;" type="text" placeholder="outline-width:10px;">
<textarea style="outline-width:10px;" placeholder="outline-width:10px;"></textarea>
<!--outline-width:medium;-->
<input style="outline-width:medium;" type="text" placeholder="outline-width:medium;">
<textarea style="outline-width:medium;" placeholder="outline-width:medium;"></textarea>
<!--outline-width:thin;-->
<input style="outline-width:thin;" type="text" placeholder="outline-width:thin;">
<textarea style="outline-width:thin;" placeholder="outline-width:thin;"></textarea>
<!--outline-width:thick;-->
<input style="outline-width:thick;" type="text" placeholder="outline-width:thick;">
<textarea style="outline-width:thick;" placeholder="outline-width:thick;"></textarea>
<!--outline-width:initial - Đưa giá trị của thuộc tính outline-style về giá trị mặc định-->
<input style="outline-width:initial;" type="text" placeholder="outline-width:initial;">
<textarea style="outline-width:initial;" placeholder="outline-width:initial;"></textarea>
<!--outline-width:inherit - Kế thừa thuộc tính outline-style từ phần tử cha-->
<input style="outline-width:inherit;" type="text" placeholder="outline-width:inherit;">
<textarea style="outline-width:inherit;" placeholder="outline-width:inherit;"></textarea>
</body>
</html>
Cách sử dụng outline-width trong CSS hiệu quả
Để outline-width phát huy đúng tác dụng, không nên chỉ quan tâm đến độ dày của đường viền. Giá trị được chọn cần phù hợp với kích thước thành phần, màu sắc và trạng thái hiển thị để tạo điểm nhấn rõ ràng mà không làm giao diện trở nên rối mắt.
Chọn độ rộng outline-width phù hợp với từng thành phần
Với các thành phần nhỏ như nút bấm, liên kết hoặc ô nhập liệu, outline quá dày có thể khiến khu vực được đánh dấu trở nên nặng nề. Ngược lại, outline quá mảnh trên thành phần lớn hoặc nền có độ tương phản thấp lại khó nhận biết.
Trong giao diện thông thường, có thể bắt đầu với độ rộng nhỏ như 1px hoặc 2px, sau đó điều chỉnh dựa trên kích thước phần tử và thiết kế tổng thể. Khi cần tạo hiệu ứng nổi bật hơn, có thể tăng độ rộng nhưng nên kiểm tra trực tiếp trên nhiều kích thước màn hình.
button {
outline-width: 2px;
}
Cách này giúp đường outline đủ rõ để nhận biết trạng thái của phần tử mà vẫn giữ được sự cân đối với nội dung bên trong.
Kết hợp outline-width với outline-style và outline-color
outline-width chỉ quyết định độ rộng của outline, vì vậy để tạo đường viền hoàn chỉnh cần phối hợp với outline-style và outline-color. Ba thuộc tính này đảm nhiệm những vai trò khác nhau nhưng cùng quyết định cách outline xuất hiện trên giao diện.
.box {
outline-width: 2px;
outline-style: solid;
outline-color: #333;
}
Khi phối hợp hợp lý, độ rộng vừa phải có thể tạo điểm nhấn rõ ràng mà không che khuất nội dung hoặc làm thay đổi cảm giác về khoảng cách giữa các thành phần.
Sử dụng outline-width cho trạng thái focus của form
Một ứng dụng thực tế của outline-width là làm nổi bật phần tử đang được focus, đặc biệt với ô nhập liệu và nút điều khiển. Người dùng có thể nhanh chóng nhận biết vị trí đang thao tác mà không cần thay đổi bố cục trang.
input:focus {
outline-width: 2px;
outline-style: solid;
outline-color: #2563eb;
}
Không nên loại bỏ outline khi phần tử được focus nếu không có cách thay thế đủ rõ ràng. Một đường outline có độ rộng và màu sắc phù hợp sẽ giúp trạng thái tương tác dễ nhận biết hơn, đồng thời hỗ trợ trải nghiệm sử dụng bằng bàn phím.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outline-width 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 *
