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 property
The outline property is a shorthand property that allows you to specify values for multiple properties such as outline-color, outline-style, and outline-width in a single declaration.
Syntax
selector {
outline: width style color;
}
Possible Values
| Property | Values | Description |
|---|---|---|
outline-width |
thin, medium, thick, length | Specifies the width of the outline |
outline-style |
solid, dashed, dotted, double, groove, ridge, inset, outset | Specifies the style of the outline |
outline-color |
color name, hex, rgb, rgba | Specifies the color of the outline |
Example: Different Outline Styles
The following example demonstrates various outline styles and colors −
<!DOCTYPE html>
<html>
<head>
<style>
.thin-outline {
outline: thin solid green;
padding: 10px;
margin: 10px;
}
.thick-outline {
outline: thick dashed #009900;
padding: 10px;
margin: 10px;
}
.medium-outline {
outline: medium dotted red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<p class="thin-outline">
This text has a thin solid green outline.
</p>
<p class="thick-outline">
This text has a thick dashed green outline.
</p>
<p class="medium-outline">
This text has a medium dotted red outline.
</p>
</body>
</html>
Three paragraphs appear with different outlines: - First paragraph: thin green solid outline - Second paragraph: thick green dashed outline - Third paragraph: medium red dotted outline Each paragraph has padding and margin for better visibility.
Key Points
Unlike borders, outlines do not take up space in the document layout and are drawn outside the element's border. Outlines are useful for highlighting elements without affecting the page layout.
Conclusion
The outline property provides a convenient shorthand for styling element outlines. It's particularly useful for accessibility features like focus indicators and visual debugging.
Updated on: 2026-03-15T11:20:35+05:30
148 Views
Advertisements