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
The outline-width Property in CSS
The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element's dimensions, unlike border property.
Syntax
selector {
outline-width: value;
}
Possible Values
| Value | Description |
|---|---|
thin |
Creates a thin outline (typically 1px) |
medium |
Creates a medium outline (typically 3px) |
thick |
Creates a thick outline (typically 5px) |
length |
Creates outline with specific width (px, em, rem, etc.) |
NOTE − The outline-style property needs to be defined before declaring outline-width.
Example 1: Thin Outline
The following example creates a thin outline around elements ?
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid navy;
outline-style: solid;
outline-width: thin;
outline-color: red;
margin: 20px;
padding: 15px;
}
</style>
</head>
<body>
<div class="box">Box with thin outline</div>
</body>
</html>
A light blue box with a navy border and a thin red outline appears. The outline is drawn outside the border.
Example 2: Medium Outline
The following example demonstrates a medium outline on heading elements ?
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline-style: dotted;
outline-width: medium;
outline-color: purple;
border: 2px solid yellow;
padding: 10px;
}
h2 {
outline-style: dotted;
outline-width: medium;
outline-color: orange;
padding: 10px;
}
</style>
</head>
<body>
<h1>Demo Heading 1</h1>
<h2>Demo Heading 2</h2>
<p>Regular paragraph text</p>
</body>
</html>
Heading 1 appears with a yellow border and purple dotted medium outline. Heading 2 has an orange dotted medium outline. The paragraph text has no outline.
Example 3: Thick Outline
The following example shows a thick outline with specific length value ?
<!DOCTYPE html>
<html>
<head>
<style>
.text-box {
border: 3px ridge lightblue;
outline-style: solid;
outline-width: thick;
outline-color: darkviolet;
padding: 15px;
margin: 20px;
background-color: #f0f0f0;
}
.custom-width {
border: 2px solid green;
outline-style: dashed;
outline-width: 8px;
outline-color: crimson;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<p class="text-box">Paragraph with thick outline</p>
<p class="custom-width">Paragraph with 8px outline</p>
</body>
</html>
First paragraph has a light blue ridge border with a thick dark violet outline. Second paragraph has a green border with an 8px dashed crimson outline.
Conclusion
The outline-width property controls the thickness of an element's outline. Use predefined values like thin, medium, thick, or specify exact measurements for precise control.
Updated on: 2026-03-15T14:06:21+05:30
74 Views
Advertisements