CSS Outline

The CSS outline property is applied outside of the element border. Please keep in mind that the outline is not applied inside the element border.

CSS Outline Properties

Followings are the CSS outline properties: outline-style, outline-color, outline-width, outline-offset, outline

Source Code

          p{
  border: 2px solid black;
  outline: #4caf50 solid 5px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

Try it now

Code Explanation

Note:Please keep in mind that the CSS outline property is applied outside of the element border.

CSS Outline Style

CSS outline-style provides the style of the outline and it has different values.

dotted-It defines a dotted outline around the element's border.
dashed-It defines a dashed outline around the element's border.
solid-It defines a solid outline around the element's border.
ridge-It defines a 3D ridged outline around the element's border.
double-It defines a double outline around the element's border.
groove-It defines a 3D grooved outline around the element's border.
inset-It defines a 3D inset outline around the element's border.
hidden-It defines a hidden outline around the element's border.
outset-It defines a 3D outset outline around the element's border.
none-It defines no outline around the element's border.

Source Code

          p.dotted {
  outline-style: dotted;
}
p.dashed {
  outline-style: dashed;
}
p.solid {
  outline-style: solid;
}
p.double {
  outline-style: double;
}
p.groove {
  outline-style: groove;
}
p.ridge {
  outline-style: ridge;
}
p.inset {
  outline-style: inset;
}
p.outset {
  outline-style: outset;
}

Try it now

Code Explanation

Note:CSS outline style has different properties such as dashed,dotted,solid,double,groove,ridge,inset,outset.

Online Test / Quiz

Question set 1

CSS Outline

CSS Outline Properties

CSS Outline Style

Online Test / Quiz

Web Tutorials