CSS >outline-width property
➔ The outline-width property specifies the width of the four outlines(top, right, bottom, left).
➔ Outline-width can have values such as thin, medium, or thick.
Syntax
outline-width: medium|thin|thick|length|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| medium | Specifies a medium outline. This is default. |
| thin | Specifies a thin outline. |
| thick | Specifies a thick outline. |
| length | Specifies the thickness of the outline. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
.p1 {
outline-width: thin;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p2 {
outline-width: medium;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p3 {
outline-width: thick;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}Click on the "Try it Now" button to see how it works.
The outline-width value can also be in px, pt, cm, em etc.
Example
.p1 {
outline-width: 1px;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p2 {
outline-width: 5px;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}
.p3 {
outline-width: 7px;
outline-style: solid;
outline-color: #e40606;
outline-offset: 1px;
border: 2px solid black;
}Click on the "Try it Now" button to see how it works.