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
Set the width, line style and color properties for an outline in a single statement with CSS
The CSS outline property is a shorthand property that allows you to set the width, line style, and color of an element's outline in a single statement. The outline appears outside the element's border and does not affect the element's dimensions or layout.
Syntax
selector {
outline: width style color;
}
Possible Values
| Property | Values | Description |
|---|---|---|
width |
thin, medium, thick, or length (px, em, etc.) | Sets the thickness of the outline |
style |
solid, dashed, dotted, double, groove, ridge, inset, outset | Defines the line style of the outline |
color |
color name, hex, rgb, rgba, etc. | Sets the color of the outline |
Example
The following example demonstrates different outline styles applied to paragraphs −
<!DOCTYPE html>
<html>
<head>
<style>
.outline1 {
outline: thin solid green;
padding: 10px;
margin: 10px 0;
}
.outline2 {
outline: thick dashed #009900;
padding: 10px;
margin: 10px 0;
}
.outline3 {
outline: 3px dotted red;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="outline1">
This text has a thin solid green outline.
</p>
<p class="outline2">
This text has a thick dashed green outline.
</p>
<p class="outline3">
This text has a 3px dotted red outline.
</p>
</body>
</html>
Three paragraphs appear with different outline styles: 1. First paragraph with a thin solid green outline 2. Second paragraph with a thick dashed green outline 3. Third paragraph with a 3px dotted red outline
Conclusion
The outline shorthand property provides an efficient way to define all outline properties at once. Remember that outlines do not take up space and appear outside the element's border, making them useful for highlighting elements without affecting layout.
Updated on: 2026-03-15T11:20:57+05:30
255 Views
Advertisements