1. css
  2. /properties
  3. /outline-width

outline-width

Definition

The outline-width property sets the width of an element's outline, which is a line drawn outside the border of the element. The outline is not part of the element's dimensions and does not affect layout.

Examples

Set the outline width to 2 pixels:

h1 {
  outline-width: 2px;
}

Set the outline width to a medium value:

button {
  outline-width: medium;
}

Set the outline width to a thick value:

input[type="text"] {
  outline-width: thick;
}

Values

ValueDescription
thinSpecifies a thin outline width. Typically 1px.
mediumSpecifies a medium outline width. Typically 3px.
thickSpecifies a thick outline width. Typically 5px.
<length>Specifies an outline width as a length value, such as 1px, 2em, or 3rem. Negative values are not allowed.

Best Practices

  • Only use outlines for interactive elements, such as links and form inputs. Outlines can be distracting and confusing for non-interactive elements, such as images and paragraphs.
  • Use a width that is large enough to be visible, but not so large that it overwhelms the content. A value of 1px is usually sufficient for simple outlines.
  • Avoid using very thick outlines, as they can interfere with the layout of adjacent elements and make the content difficult to read.
  • Ensure that the outline has sufficient contrast with the background color to be visible for users with low vision.
  • Use the hidden value to create visual effects where an outline is only shown on hover or focus, rather than relying on none and changing the border property, which can cause layout shifts.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes