Outlines are very similar to borders but have the following major differences:

  • An outline does not take up space, i.e. they are outside of the element
  • Outlines do not have to be rectangular
  • Outline is always the same on all sides, i.e. you cannot specify different values for different sides of the element



Three outline properties can be specified:

  • outline-style
  • outline-color
  • outline-width


Or, all three can be set using the shorthand keyword outline on its own:



#myDiv { outline: solid 1px red ;}

h1 { outline: groove 1em #00F; }

.myClass { outline: outset 2pt #ABCDEF}





Sets the outline style of the element


Property Description
none no border. equivalent of border-width:0;
solid Single solid line
dotted Series of dots
dashed Series of dashes
double Two solid lines
groove 3D grooved border
ridge 3D ridged border
inset 3D inset border
outset 3D outset border
hidden Same as none



h1 { outline-style: dotted ; }

p { outline-style: solid ; }





Sets the outline color of the element, in hex, RGB or colour name.



h1 { outline-color: #00F; }

p { outline-color: rgb(63, 127, 255) ; }

.myClass { outline-color: orange ; }





Sets the width of the outline in px, pt or cm or it should be set to thin, medium or thick.



h1 { outline-width: 5px ; }

p { outline-width: medium ; }

Leave a Reply