Outlines

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:

 

Example:

#myDiv { outline: solid 1px red ;}

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

.myClass { outline: outset 2pt #ABCDEF}

 

 

outline-style

 

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

 

Examples:

h1 { outline-style: dotted ; }

p { outline-style: solid ; }

 

 

outline-color

 

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

 

Examples:

h1 { outline-color: #00F; }

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

.myClass { outline-color: orange ; }

 

 

outline-width

 

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

 

Examples:

h1 { outline-width: 5px ; }

p { outline-width: medium ; }

Leave a Reply