Code Thuộc tính outline-width trong CSS

Trình soạn thảo - Code Thuộc tính outline-width trong CSS

Kết quả - Code Thuộc tính outline-width trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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;">&lt;/textarea>

<!--outline-width:10px;-->
<input style="outline-width:10px;" type="text" placeholder="outline-width:10px;">
<textarea style="outline-width:10px;" placeholder="outline-width:10px;">&lt;/textarea>

<!--outline-width:medium;-->
<input style="outline-width:medium;" type="text" placeholder="outline-width:medium;">
<textarea style="outline-width:medium;" placeholder="outline-width:medium;">&lt;/textarea>

<!--outline-width:thin;-->
<input style="outline-width:thin;" type="text" placeholder="outline-width:thin;">
<textarea style="outline-width:thin;" placeholder="outline-width:thin;">&lt;/textarea>

<!--outline-width:thick;-->
<input style="outline-width:thick;" type="text" placeholder="outline-width:thick;">
<textarea style="outline-width:thick;" placeholder="outline-width:thick;">&lt;/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;">&lt;/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;">&lt;/textarea>

</body>
</html>