CSS Outline StyleCSS Outline WidthCSS Outline ColorCSS Outline - Shorthand propertyCSS Outline Offset
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
CSS has the following outline properties:
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
outline-styleproperty specifies the style of the outline, and can have one of the following values:
dotted- Defines a dotted outline
dashed- Defines a dashed outline
solid- Defines a solid outline
double- Defines a double outline
groove- Defines a 3D grooved outline
ridge- Defines a 3D ridged outline
inset- Defines a 3D inset outline
outset- Defines a 3D outset outline
none- Defines no outline
hidden- Defines a hidden outline
outline-widthproperty specifies the width of the outline, and can have one of the following values:
- thin (typically 1px)
- medium (typically 3px)
- thick (typically 5px)
- A specific size (in px, pt, cm, em, etc)
outline-colorproperty is used to set the color of the outline.
The color can be set by:
- name - specify a color name, like "red"
- HEX - specify a hex value, like "#ff0000"
- RGB - specify a RGB value, like "rgb(255,0,0)"
outlineproperty is a shorthand property for setting the following individual outline properties:
outlineproperty is specified as one, two, or three values from the list above. The order of the values does not matter.
outline-offsetproperty adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.