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.
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:
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.
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.