CSS Outline

CSS outline is a property that allows you to create a border-like visual effect around an element, but without affecting the layout of the page. It is often used to provide visual feedback when an element is selected or focused, such as when a user clicks on a link or a form input field.

The outline property has the following syntax:

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

• outline-width : Specifies the width of the outline. It can be specified using a length value (such as 2px ), a keyword (such as thin,medium, or thick ), or the value inherit.
• outline-style  : Specifies the style of the outline. It can be one of the following values: dotted,dashed,solid,double,groove,ridge,inset,outset,  or the value none.
• outline-color : Specifies the color of the outline. It can be specified using a color name, a hexadecimal value, an RGB or HSL value, or the value invert.

Here’s an example of how to use the outline property:

a:focus {
  outline: 2px solid blue;
}

In this example, we’re setting the outline of links ( a elements) to a 2-pixel wide solid blue line when they are in focus.

Note that the outline property is similar to the border property, but the difference is that outline does not affect the layout of the page, whereas border does.