The outline properties are similar to border properties with important deference: outlines unlike borders, are not calculated in the with of the element box. Its din not affect layout.

Outline Style

 The outline-style property is used to set the line style for the outline,

Syntax: outline-style: value;
Values: auto | solid | none | dotted | dashed | double | grove | ridge | inset | outset
Default: none

Outline Width

 The outline-width property is used to set the width of outline.

Syntax: outline-width: value;
Values: length | thin | medium | thick
Default: medium

Outline Color

 The outline-color property is used to set the color of the outline.

Syntax: outline-color: value;
Values: color name or number | invert
Default: invert

Outline Offset

 The outline-offset property to moves the outline beyond the border by a specified length.

Syntax: outline-offset: value;
Values: length
Default: 0


The outline property specify the three outline properties in on declaration.

Syntax: outline: value;
Values: outline-style outline-width outline-color
Default: defaults of individual properties

div { outline: 2px dashed red;}

Leave a Reply