CSS outline property is used to draw a line around the element, outside the border.
The CSS outline property defines the width, style, and color of the outline of an element.
It is a shorthand property for defining the outline-width, outline-style, and outline-color CSS properties.
- Outline-style
- Outline-color
- Outline-width
- Outline-offset
CSS Outline Style:
The outline-style property set the style or type of outline.
It has following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid.
CSS Outline Color:
The outline-color property specifies the color of the outline. You can set the color by its name, RGB value or hex value.
Note: If you are using, the outline-color property alone then it does not work. Use the outline-style property to set the outline first and then set the outline-color.
CSS Outline Width:
By using outline-width property, you can set the width of the outline.
The width can be defined as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The CSS Outline Shorthand Property:
The outline CSS property is a shorthand property, allows you to specify one or more of the individual outline properties outline-width, outline-style, and outline-color in a single rule.
CSS Outline Offset:
The outline-offset property is used to set the space between the outline and the border of the HTML element. This space is transparent.
Outlines are very similar to borders, but there are few major differences.
- An outline does not take up space.
- Outlines do not have to be rectangular.
- Outline is same on all sides; you cannot specify different values for different sides of an element.