CSS OUTLINE STYLE

In CSS, the outline-style property specifies the style of an element's outline.

Common outline-style values

/* Solid line */
outline-style: solid;

/* Dashed line */
outline-style: dashed;

/* Dotted line */
outline-style: dotted;

/* Double line */
outline-style: double;

/* Grooved effect */
outline-style: groove;

/* Ridged effect */
outline-style: ridge;

/* Inset effect */
outline-style: inset;

/* Outset effect */
outline-style: outset;

/* No outline */
outline-style: none;

Example

<button class="btn">Click Me</button>

.btn {
  outline-style: solid;
  outline-color: blue;
  outline-width: 3px;
}

You can also use the shorthand:

.btn {
  outline: 3px solid blue;
}

Note: Unlike border, an outline does not take up space in the element's layout.