CSS outline-width Property Tutorial

In this section, we will learn what the outline-width property is and how to use it in CSS.

Click here to run the outline-width property.

CSS outline-width Property Definition and Usage

The CSS `outline-width` property is used to set the width of the outline of an element.

Note: before setting this value, you should set the `outline-style` property, otherwise you won’t see any border. This property is explained in the outline-style section.

CSS outline-width Property Syntax

outline-width: medium|thin|thick|length|initial|inherit;

CSS outline-width Property Value

The value we set for this property can be either:

  • thin: using this value, the outline will have a thickness somewhere around 1px.
  • medium: using this value, the outline will have a thickness around 3px.
  • thick: using this value, the outline will have a thickness around 5px.

Also, you can set number as the value for this property. Any CSS supported units can be used for this property.

Note: you can use percentage value for this property.

Note: the two global values “initial” and “inherit” could also be used.

Example: outline-width in CSS

See the Pen outline-width in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Leave a Reply