- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The outline Shorthand Property in CSS
The outline shorthand property can be defined to draw a line of specific style (required), thickness, and color around the borders of the element, but the outline is not a part of element’s dimensions unlike border property.
Syntax
The syntax of CSS outline Shorthand property is as follows −
Selector { outline: /*value*/ }
The value above can be −
outline-width
outline-style
outline-color
Outline property with style and color
Let’s see an example of the outline Shorthand property. We have set the outline style with color −
outline: groove black;
Example
Here is the example −
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: #f28500 #dc3545; position: absolute; outline: 5px double green; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline: groove black; height: 80px; width: 80px; } #container { width:50%; margin:50px auto; } </style> </head> <body> <div id="container"> <div id="showDiv"><span></span></div> </div> </body> </html>
Outline property with all the values
Let’s see another example of outline Shorthand property. In this example, we have all the outline properties in a single line −
outline: 5px dashed yellow;
Example
Here is the example −
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 10px; border-color: orange; outline: 5px dashed yellow; } </style> </head> <body> <div id="container"> <p>Coding Ground is loved by millions of programmers around the globe.</p> </div> </body> </html>
Outline Width
The outline width values can be −
thin
thick
medium
length units
Example
Let us see the example. Here, we have set thin and thick outline here using the shorthand property −
<!DOCTYPE html> <html> <head> <style> h1 { outline: thin dashed green; } h2 { outline: thick dashed green; } </style> </head> <body> <h1>Demo Heading1</h1> <h2>Demo Heading2</h2> <p>Demo Text</p> </body> </html>
Outline Style
The outline style in the outline shorthand property can have any of the following values −
dotted − Set a dotted border
dashed − Set a dashed border
solid − Set a solid border
double − Set a double border
groove − Set a 3D grooved border
ridge − Set a 3D ridged border
inset − Set a 3D inset border
Example
Let us see the example. We have set the dotted and dashed outlines here using the shorthand property −
<!DOCTYPE html> <html> <head> <style> h1 { outline: dotted green; } h2 { outline: dashed green; } </style> </head> <body> <h1>Demo Heading1</h1> <h2>Demo Heading2</h2> <p>Demo Text</p> </body> </html>