CSS outline
CSS outline is a shorthand property, used to specify styles for the outline in the element.
It is similar to the border property. However they vary in the following ways,
- Unlike border, which takes space inside the element. outline takes space outside the element.
- border can be used only on rectangular or square shape, but outline can take on any shape.
It consists of following shorthand properties
- outline-width : It is used to specify the width of the outline.
- outline-style : It is used to specify what type of outline style to be used.
- outline-color : It is used to specify the color of the outline.
In the above example values used in border-top property are,
5px,4px - outline-width
double, dashed - outline-style
blue - outline-color
Difference between border and outline
Unlike border, which takes space inside the element. outline takes space outside the element.
border can be used only on rectangular or square shape, but outline can take on any shape.