CSS Outline

The CSS outline property is used to create a visible border around an element without affecting its layout or dimensions. It is often used to highlight or emphasize elements, such as links or form fields, and to provide a focus indicator for accessibility purposes.

The syntax for the outline property is as follows:

selector {
  outline: [outline-width] [outline-style] [outline-color];
}

• selector: Represents the HTML element or class to which the outline property will be applied.
• outline-width: Specifies the width of the outline. It can be a length value (e.g., 2px, 3px, etc.) or one of the predefined keywords (thin, medium, or thick).
• outline-style: Specifies the style of the outline, such as solid, dotted, dashed, double, etc.
• outline-color: Specifies the color of the outline. It can be a named color (e.g., red, blue, etc.), a hexadecimal color code, or the invert keyword (to use the inverted color of the background).

Example:

a {
  outline: 2px solid blue;
}

In this example, all hyperlinks (<a> elements) will have a blue solid outline with a width of 2px.

It’s important to note that the outline property does not take up any space or affect the layout of the element, unlike the border property. Additionally, the outline will be drawn outside the element’s border, and it does not support rounded corners.

The outline property is especially useful for highlighting elements that are currently in focus, such as when a user navigates a webpage using the keyboard. Browsers automatically apply focus outlines to elements for accessibility purposes, but you can use the outline property to customize or remove the default focus styles if needed.

Example of customizing focus outline:

input:focus {
  outline: 2px dotted green;
}

In this example, when an <input> element receives focus, it will have a green dotted outline with a width of 2px.

When using the outline property for custom focus styles, ensure that the focus styles remain visible and clear for all users, especially those with visual impairments who rely on keyboard navigation. Additionally, consider using other CSS properties like :focus and :hover to provide visual feedback for interactive elements on your website.