CSS OUTLINE SHORT HAND PROPERTY

The CSS outline shorthand property sets the outline around an element in one desclaration.

Syntax

outline: [outline-width] [outline-style] [outline-color];

Example

button {
  outline: 2px solid blue;
}

This is equivalent to:

button {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
}

Common values

/* Width + style + color */
outline: 2px solid red;

/* Just style */
outline: dashed;

/* Width + style */
outline: 3px dotted;

/* Remove outline */
outline: none;

Important: An outline is drawn outside the element's border and generally does not take up space in the layout.

For keyboard accessibility, avoid outline: none unless you provide another visible focus indicator.