Thuộc tính outline-style trong CSS
Bùi Tấn Lực - 823
- 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>
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 *
