CSS outline property

CSS outline

CSS outline is a shorthand property, used to specify styles for the outline in the element.

It is similar to the border property. However they vary in the following ways,

  • Unlike border, which takes space inside the element. outline takes space outside the element.
  • border can be used only on rectangular or square shape, but outline can take on any shape.

It consists of following shorthand properties

  • outline-width : It is used to specify the width of the outline.
  • outline-style : It is used to specify what type of outline style to be used.
  • outline-color : It is used to specify the color of the outline.

Example

Try Yourself

In the above example values used in border-top property are,

5px,4px - outline-width

double, dashed - outline-style

blue - outline-color


Difference between border and outline

Unlike border, which takes space inside the element. outline takes space outside the element.

border can be used only on rectangular or square shape, but outline can take on any shape.

Example

Try Yourself