Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS outline-width property
The CSS outline-width property is used to set the width of the outline around an element. The outline appears outside the element's border and does not affect the element's dimensions or layout.
Syntax
selector {
outline-width: value;
}
Possible Values
| Value | Description |
|---|---|
thin |
Sets a thin outline (typically 1px) |
medium |
Sets a medium outline (typically 3px) |
thick |
Sets a thick outline (typically 5px) |
length |
Sets a specific width using px, em, rem, etc. |
Example
The following example demonstrates different outline widths −
<!DOCTYPE html>
<html>
<head>
<style>
.thin-outline {
outline-width: thin;
outline-style: solid;
outline-color: blue;
padding: 10px;
margin: 15px 0;
}
.thick-outline {
outline-width: thick;
outline-style: dashed;
outline-color: red;
padding: 10px;
margin: 15px 0;
}
.custom-outline {
outline-width: 5px;
outline-style: dotted;
outline-color: green;
padding: 10px;
margin: 15px 0;
}
</style>
</head>
<body>
<p class="thin-outline">This text has a thin outline.</p>
<p class="thick-outline">This text has a thick outline.</p>
<p class="custom-outline">This text has a 5px outline.</p>
</body>
</html>
Three paragraphs appear with different outline widths: the first with a thin blue solid outline, the second with a thick red dashed outline, and the third with a 5px green dotted outline around each text block.
Conclusion
The outline-width property controls the thickness of an element's outline. Remember that outline-style must also be set for the outline to be visible, as outlines are invisible by default.
Updated on: 2026-03-15T11:27:44+05:30
182 Views
Advertisements