The outline-width CSS property is used to set the width or thickness of the outline that surrounds an element. It controls the thickness of the line that forms the outline.
The outline-width property accepts various values, including:
-
thin: Sets a thin outline width. -
medium: Sets a medium outline width (default). -
thick: Sets a thick outline width. - Length values: Specifies a specific thickness using length units, such as pixels (
px) or other CSS units.
Here’s an example:
button {
outline-style: solid;
outline-width: 2px;
}
In this example, the button element is styled with a solid outline of 2 pixels width. When the button gains focus or is activated, a solid line outline of 2 pixels will be visible around it.
You can adjust the outline-width value to create outlines with different thicknesses according to your design requirements. Using specific length values allows you to define a custom width for the outline.
It’s important to note that the outline-width property only applies if an outline is set using the outline property. If no outline is set, the outline-width property has no effect.
The outline-width property is particularly useful for customizing the thickness of outlines, providing visual cues and emphasis to elements, especially when indicating focus or interactivity.