View video tutorial

CSS Outline Width

CSS

This specifies the width of the outline.

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.

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;
}
Try it Now »

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;
}
Try it Now »

Click on the "Try it Now" button to see how it works.