=>CSS Outline:

  • An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". 
  • The css outline properties specify the style , color and width of an outline. 
  • The elements width and height not affected by the width of the outline. 
  • Outline differs from borders! Unlike border, the outline is drawn outside the element's border. 
  • CSS has the following outline properties: 
  • All CSS Outline Properties

Outline Style:
  • The outline-style property specifies the style of the outline, and can have one of the following values:
  • dotted - Defines a dotted outline 
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline 
  • double - Defines a double outline 
  • groove - Defines a 3D grooved outline 
  • ridge - Defines a 3D ridged outline 
  • inset - Defines a 3D inset outline 
  • outset - Defines a 3D outset outline 
  • none - Defines no outline 
  • hidden - Defines a hidden outline
Outline Color:

  • The outline-color property is used to set the color of the outline.
P 
{ 
border: 1px solid black; 
outline-style: solid; 
outline-color: red; 
}

Outline Width:
  • The outline-width property specifies the width of the outline, and can have one of the following values:
  • thin (typically 1px) 
  • medium (typically 3px) 
  • thick (typically 5px)
Example :

p 
{ 
  border: 1px solid black; 
  outline-style: solid; 
  outline-color: red; 
  outline-width: thin; 
}

Outline Offset:

  • The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent. 
  • The following example specifies an outline 15px outside the border edge:
Example :

p
{ 
  margin: 30px; 
  border: 1px solid black; 
  outline: 1px solid red; 
  outline-offset: 15px; 
}