Styling is not just about making the elements look good, rather be clearly visible while looking good.
One such CSS feature that helps the developer in the “visibility” regard is the outline property.
In simplest terms, outline is essentially a line drawn around the elements (not inside the Borders) to make the element clearly visible on the web-page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <style> div { background-color: #FCD1CD; outline: 5px solid cyan; border: 1px solid red; } </style> </head> <body> <div>This div's border is 1px solid red and outline is 5px solid syan</div> </body> </html> |
Outlines can also be used to differentiate and element from others on the page.
There are 4 outline properties
- outline-width
- outline-style
- outline-color
- outline-offset
above combinly outline shorthand property can be created.
Please note, that outline is a separate element in itself.
Unlike the Borders, it is not a part of the box-model for the element it is around and thus, does not affect the actual height and width of that element.
The above-mentioned CSS properties, define different aspects of the outline element as obvious. Let’s take a look at them one by one.
outline-width
The width of the outline can be specified with the following permissible values:
thin (~1px)
medium(~3px)
thick(~5px)
Any specific size
1 2 3 4 | div { outline-width: thin; outline-style: solid; } |
1 2 3 4 | div { outline-width: medium; outline-style: solid; } |
1 2 3 4 | div { outline-width: thick; outline-style: solid; } |
1 2 3 4 5 6 7 8 9 10 | div { outline-width: 2px; outline-style: solid; } #one{ outline-width: 1rem; outline-style: solid; outline-color:red; padding:10px; } |
outline-style
This property provides the kind of outline that will be rendered on the web-page.
The allowed values for this are:
dotted |dashed |solid |double |groove| ridge |inset |outset |none|hidden
1 2 3 4 | div { outline-width: 5px; outline-style: dotted; } |
1 2 3 4 | div { outline-width: 5px; outline-style: dashed; } |
1 2 3 4 | div { outline-width: 5px; outline-style: solid; } |
1 2 3 4 | div { outline-width: 10px; outline-style: double; } |
Here, the values: groove, ridge, inset, and outset are dependent on the outline color for their effects.
1 2 3 4 5 6 | div { outline-width:15px; outline-style: ridge; outline-color:#DC7633; } |
1 2 3 4 5 6 | div { outline-width:15px; outline-style: groove; outline-color:#DC7633; } |
1 2 3 4 5 6 | div { outline-width:15px; outline-style: inset; outline-color:#DC7633; } |
1 2 3 4 5 6 | div { outline-width:15px; outline-style: outset; outline-color:#DC7633; } |
1 2 3 4 5 6 | div { outline-width:15px; outline-style:none; outline-color:#DC7633; } |
1 2 3 4 5 6 | div { outline-width:15px; outline-style: hidden; outline-color:#DC7633; } |
outline-color
The allowed values for the colors are:
color name
RGB Code
Hex Code
Invert
1 2 3 4 5 6 7 8 9 | div { outline-width:10px; outline-style: solid; outline-color:red; } |
1 2 3 4 5 6 7 8 | div { outline-width:10px; outline-style: solid; outline-color:rgb(218, 115, 48); } |
1 2 3 4 5 6 7 8 | div { outline-width:10px; outline-style: solid; outline-color:#3498DB; } |
1 2 3 4 5 6 7 8 | div { outline-width:10px; outline-style: solid; outline-color:invert; } |
The invert, basically, performs a color inversion ensuring the visibility of the outline regardless of the background color.
Try the outline-color as yellow and check if you’re able to differentiate between the above mentioned outline-style values.
outline-offset
This property specifies the space between the outline and the border of the enclosed element. This is a transparent space.
1 2 3 4 5 6 7 | div { outline-width:5px; outline-style: solid; outline-color:red; border:2px solid green; outline-offset: 5px; } |
outline (shorthand property)
For the shorthand property you can specify the width, style and color of the outline.
The order of the values doesn’t matter and you can specify one, two or three of these values as per the requirement.
1 2 3 4 5 | div { outline:5px solid red; } |