outline

Definition

The outline property is used to add an outline (a line that surrounds an element, but is outside the element's border) to an element. The outline is not a part of the element's dimensions, and does not take up space on the page.

Examples

This example adds a solid blue outline with a width of 2 pixels to all button elements:

button {
  outline: 2px solid blue;
}

This example adds a dashed red outline with a width of 2 pixels to any input element that is currently in focus:

input:focus {
  outline: 2px dashed red;
}

This example adds a solid gray outline with a width of 1 pixel to any div element that is currently being hovered over with the mouse:

div:hover {
  outline: 1px solid gray;
}

Values

Best Practices

• Use outline: none; to remove the default outline that is added to links when they are clicked. However, make sure to provide an alternative way for users to know that the link has been clicked (such as changing the color or background of the link).
• Be mindful of the contrast between the outline color and the background color of the element. If the colors are too similar, the outline may be difficult to see.
• Avoid using thick outlines that may obscure the content of the element.
• Use :focus and :hover selectors to add outlines only when the element is being interacted with, to avoid cluttering the interface with unnecessary outlines.
• Use the outline-offset property to give the outline some breathing room around the element, making it more visually pleasing.

Browser Compatibility

The outline property is supported by all major web browsers, including Chrome, Firefox, Safari, and Edge. However, there may be some differences in how the property is rendered across different browsers, particularly with respect to the outline-offset property. It is always a good idea to test your website on different browsers to ensure that the outlines appear as intended.