Outline

The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:

  • It always goes around all the sides, you can’t specify particular sides
  • It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!)
div { 
    outline: 4px solid blue; 
}

Outline has 4 modes:

  • The outline-width property is used to set the width of the outline.
div {
    outline-width: thick;
}
  • The outline-style property is used to set the line style for the outline.
div {
    outline-style: double;
}
  • The outline-color property is used to set the color of the outline.
div {
    outline-color: blueviolet;
}
  • The outline-offset property is used to specifies the space between an outline and the edge or border of an element.
div {
      outline: 4px solid red;
      outline-offset: 15px;
}