CSS outline Property

CSS outline property sets the width, style, and color of an element’s outline.  An outline is a line that is drawn outside the borders of an element for decoration purposes.

The outline property is a shorthand of the following three properties:

Example:

.p1{
  outline: 10px dotted blue;
}
.p2{
  outline: 5px dashed hotpink;
}

CSS Syntax

The outline property has the below syntax:

outline: outline-width outline-style outline-color|initial|inherit;

Property Values

The outline property accepts the following values:

outline-widthSpecifies the thickness of the outline.
outline-styleSpecifies the style of the outline.
outline-colorSpecifies the color of the outline.
initialSets the outline property to its default value.
inheritInherits the outline property from the parent element.

General Info

Default Valuemedium none invert
InheritedNo
JavaScript Usageelement.style.outline = “10px dotted blue”;

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.

Leave a Comment