View video tutorial

CSS Outline Shorthand

CSS

It is used to set the outline by a single line.

CSS outline property

The outline property is a shorthand property and is used to set the following properties in order.

  • outline-width
  • outline-style(required)
  • outline-color

Example

.p1 {
  outline: 5px solid red;
  outline-offset: 1px;
  border: 2px solid black;
}
.p2 {
  outline: 5px double  #32b853;
  outline-offset: 2px;
  border: 2px solid black;
}
Try it Now »

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