CSS outline-width Property

CSS outline-width property sets the thickness of an element’s outline. An outline is a line that is drawn outside the borders of an element for decoration purpose.

The outline-width can be specified using inbuilt CSS keywords like ‘thin’, ‘medium’, ‘thick’ or in any Valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Refer to the example below:

Example:

.p1{
  outline-width: thick;
}
.p2{
  outline-width: 10px;
}

CSS Syntax

The outline-width property has the below syntax:

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

Property Values

The outline-width property accepts the following values:

mediumThis is the default value. It sets a medium thickness outline.
thinSpecifies a thin outline.
thickSpecifies a thick outline.
lengthSpecifies the thickness of outline-width in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the outline-width property to its default value(medium).
inheritInherits the outline-width property from the parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.outlineWidth = “10px”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment