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

      
         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

      
         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

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS