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:
- outline-width
- outline-style(required)
- outline-color
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-width | Specifies the thickness of the outline. |
| outline-style | Specifies the style of the outline. |
| outline-color | Specifies the color of the outline. |
| initial | Sets the outline property to its default value. |
| inherit | Inherits the outline property from the parent element. |
General Info
| Default Value | medium none invert |
| Inherited | No |
| JavaScript Usage | element.style.outline = “10px dotted blue”; |
