CSS outline-width

The outline-width property in CSS is used to specify the width of an outline around an element. The outline is drawn outside the border edge of the element, but it does not take up any space in the layout of the page. It is often used to highlight or emphasize an element.

The outline-width property can have values in different units, such as pixels, em, rem, and percentages. The default value is medium, but you can specify a specific width using a numerical value.

Examples:

Result:


  <div style="border: 2px solid black; outline-width: 5px; padding: 10px;">
    This is a div element with a black border and a 5px outline.
  </div>

This is a div element with a black border and a 5px outline.

In the example above, we have a <div> element with a 2px black border and a 5px outline. The outline width is specified using the outline-width: 5px; property.

You can also use different units for the outline width. For example:

Result:


  <div style="border: 2px solid black; outline-width: 0.5em; padding: 10px;">
    This is a div element with a black border and a 0.5em outline.
  </div>

This is a div element with a black border and a 0.5em outline.

In this example, we have the same <div> element with a 2px black border, but this time the outline width is specified in em units using outline-width: 0.5em;.

Experiment with different values and units for the outline-width property to see how it affects the appearance of your elements.