A line that is drowned just outside of the border to make the element stand out is outline.
The CSS outline has following properties:
Difference between outline and border
The outline looks very similar to border but it is different from that.Difference between outline and border are as follows:
|Outline don't take up space||Borders do take space|
|Outline do not change shape||Border change shape|
|Outline can't be given different values to different side of it||Borders can be given different value to different side of the border|
|Outline may have different shapes other than rectangle||Borders are rectangle|
The outline-style property sets a different style of outline look.
The outline-style have following values:
- solid - It defines solid outline.
- dashed - It defines a dashed outline.
- dotted - It defines a dotted outline.
- double - It defines double outline.
- groove - It defines 3D grooved outline.
- inset - It defines 3D inset outline.
- outset - It defines 3D outset outline.
- ridged - It defines a 3D ridged outline.
- none - It defines no outline.
- hidden - It defines a hidden outline.
2.) Outline Color
The outline-color property sets color to outline look.Color can be set by color name,HEX value,RGB value and HSL value.
3.) Outline width
The outline-width property sets width to outline look.outline-width has following values:
- thin - It defines a outline of generally 1px.
- medium - It defines a outline of generally 3px.
- thick - It defines a outline of generally 5px.
- Any width - It defines a outline in px,pt,cm etc.
4.) Outline offset
The outline-offset property sets a gap between the border and outline.
5).Outline shorthand property
The outline is a shorthand property which is used to set multiple outline property values.
Using outline property we can specify one,two or all three values of outline-style (required) , outline-width and outline-color.Order of these three doesn't matter.