Understand CSS Style Outline Property

CSS outline

The CSS outline color 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
Statement

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

Let us see CSS outline statement.

General Syntax

p{
 outline: #4caf50 solid 5px;
}    

Source Code

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

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.

General Syntax

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;
}    

Source Code

Download
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;
}

Code Explanation

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

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com