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-style Property in CSS
The CSS outline-style property defines the style of an outline drawn around an element's border. Unlike the border property, the outline is not part of the element's dimensions and does not affect the layout.
Syntax
selector {
outline-style: value;
}
Possible Values
| Value | Description |
|---|---|
dotted |
Creates a dotted outline |
dashed |
Creates a dashed outline |
solid |
Creates a solid outline |
double |
Creates a double outline |
groove |
Creates a 3D grooved outline |
ridge |
Creates a 3D ridged outline |
inset |
Creates a 3D inset outline |
outset |
Creates a 3D outset outline |
none |
No outline (default) |
Example: Solid and Double Outline
This example demonstrates solid and double outline styles −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 100px;
margin: 20px;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
display: inline-block;
}
.solid-outline {
outline-style: solid;
outline-width: 3px;
outline-color: blue;
}
.double-outline {
outline-style: double;
outline-width: 6px;
outline-color: red;
}
</style>
</head>
<body>
<div class="box solid-outline">Solid Outline</div>
<div class="box double-outline">Double Outline</div>
</body>
</html>
Two gray boxes appear side by side. The first has a solid blue outline, and the second has a double red outline around it.
Example: Dashed and Dotted Outline
This example shows dashed and dotted outline styles −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 30px;
padding: 20px;
}
.dashed-text {
outline-style: dashed;
outline-width: 2px;
outline-color: green;
padding: 15px;
margin: 10px 0;
}
.dotted-text {
outline-style: dotted;
outline-width: 3px;
outline-color: purple;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<p class="dashed-text">This paragraph has a dashed outline.</p>
<p class="dotted-text">This paragraph has a dotted outline.</p>
</div>
</body>
</html>
Two paragraphs appear with different outline styles. The first has a green dashed outline, and the second has a purple dotted outline.
Example: 3D Outline Effects
This example demonstrates the groove and ridge 3D outline effects −
<!DOCTYPE html>
<html>
<head>
<style>
.effect-box {
width: 200px;
height: 80px;
margin: 20px;
padding: 20px;
background-color: #e0e0e0;
display: inline-block;
text-align: center;
line-height: 80px;
}
.groove-effect {
outline-style: groove;
outline-width: 5px;
outline-color: #888;
}
.ridge-effect {
outline-style: ridge;
outline-width: 5px;
outline-color: #888;
}
</style>
</head>
<body>
<div class="effect-box groove-effect">Groove Effect</div>
<div class="effect-box ridge-effect">Ridge Effect</div>
</body>
</html>
Two boxes appear with 3D outline effects. The first shows a groove effect (appearing carved in), and the second shows a ridge effect (appearing raised).
Conclusion
The outline-style property provides various styling options for element outlines. Remember that outlines don't affect the element's box model and are drawn outside the border area.
Updated on: 2026-03-15T14:01:58+05:30
109 Views
Advertisements