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
The outline Shorthand Property in CSS
The CSS outline shorthand property is used to draw a line around an element's border. Unlike the border property, the outline does not affect the element's dimensions or layout and is drawn outside the border area.
Syntax
selector {
outline: outline-width outline-style outline-color;
}
Possible Values
| Property | Description | Values |
|---|---|---|
outline-width |
Specifies the thickness of the outline | thin, medium, thick, or length units (px, em, etc.) |
outline-style |
Specifies the line style (required) | dotted, dashed, solid, double, groove, ridge, inset, outset |
outline-color |
Specifies the color of the outline | Color names, hex values, rgb(), etc. |
Example: Basic Outline with Style and Color
The following example demonstrates a basic outline with style and color −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
outline: groove black;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box">Outlined Box</div>
</body>
</html>
A light blue box with a blue border and a black grooved outline appears. The outline is drawn outside the border.
Example: Complete Outline with All Properties
This example shows the outline shorthand with width, style, and color specified −
<!DOCTYPE html>
<html>
<head>
<style>
.text-box {
padding: 15px;
margin: 20px;
border: 3px solid orange;
outline: 5px dashed yellow;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p class="text-box">This paragraph has both a border and an outline. The outline is 5px thick, dashed, and yellow in color.</p>
</body>
</html>
A paragraph with an orange border and a 5px yellow dashed outline appears. The outline is clearly visible outside the border.
Example: Different Outline Widths
This example demonstrates thin and thick outline widths −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: thin dashed green;
margin: 20px 0;
}
h2 {
outline: thick dashed green;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Thin Dashed Outline</h1>
<h2>Thick Dashed Outline</h2>
<p>Regular text without outline</p>
</body>
</html>
Two headings appear with green dashed outlines - the first with a thin outline and the second with a thick outline.
Example: Different Outline Styles
This example shows various outline styles using the shorthand property −
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
outline: 3px dotted red;
margin: 15px;
padding: 10px;
}
.dashed {
outline: 3px dashed blue;
margin: 15px;
padding: 10px;
}
.solid {
outline: 3px solid green;
margin: 15px;
padding: 10px;
}
</style>
</head>
<body>
<div class="dotted">Dotted outline</div>
<div class="dashed">Dashed outline</div>
<div class="solid">Solid outline</div>
</body>
</html>
Three boxes appear with different outline styles: a red dotted outline, a blue dashed outline, and a green solid outline.
Conclusion
The outline shorthand property provides a convenient way to add visual emphasis around elements without affecting their layout. Remember that outline-style is required, while width and color are optional and will use default values if not specified.
666 Views
