CSS Outline


An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

However, the outline property is different from the border property.

The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

Property Description Values
outline Sets all the outline properties in one declaration outline-color
outline-style
outline-width
inherit
outline-color Sets the color of an outline color_name
hex_number
rgb_number
invert
inherit
outline-style Sets the style of an outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Sets the width of an outline thin
medium
thick
length
inherit

Outline

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width.

If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

Note: The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

CSS Syntax

outline: outline-color outline-style outline-width|initial|inherit;

Example

<html>
     <head>
        <style type="text/css">
          p {
          outline: #00FF00 dotted thick;
          border: 2px solid #000;
           }
         </style>
        </head>
        <body>
        <p>Welcom To CSS Tutorial</p>
     </body>
    </html>
Output

Welcom To CSS Tutorial


Outline-color

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-color property specifies the color of an outline.

CSS Syntax

outline-color: invert|color|initial|inherit;
Property Values Description
invert Performs a color inversion. This ensures that the outline is visible, regardless of color background. This is default
color Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

<html>
     <head>
        <style type="text/css">
          p {
          outline-style: dotted;
          outline-color: #000;
           }
         </style>
        </head>
        <body>
        <p>Welcom To CSS Tutorial</p>
     </body>
    </html>
Output

Welcom To CSS Tutorial


Outline Style

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

CSS Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values Description
none Specifies no outline. This is default
hidden Specifies a hidden outline
dotted Specifies a dotted outline
dashed Specifies a dashed outline
solid Specifies a solid outline
double Specifies a double outliner
groove Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge Specifies a 3D ridged outline. The effect depends on the outline-color value
inset Specifies a 3D inset outline. The effect depends on the outline-color value
outset Specifies a 3D outset outline. The effect depends on the outline-color value
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

<html>
     <head>
        <style type="text/css">
          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; }
         </style>
        </head>
        <body>
        <p class="dotted">Outline Style Dotted</p>
        <p class="dashed">Outline Style dashed</p>
        <p class="solid">Outline Style solid</p>
        <p class="double">Outline Style double</p>
        <p class="groove">Outline Style groove</p>
        <p class="ridge">Outline Style ridge</p>
        <p class="inset">Outline Style inset</p>
        <p class="outset">Outline Style outset</p>
     </body>
    </html>
Output

Outline Style Dotted

Outline Style dasheds

Outline Style solid

Outline Style double

Outline Style groove

Outline Style ridge

Outline Style inset

Outline Style outset


Outline Width

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-width specifies the width of an outline.

CSS Syntax

outline-width: medium|thin|thick|length|initial|inherit;
Property Values Description
medium Specifies a medium outline. This is default
thin Specifies a thin outline
thick Specifies a thick outline
length Allows you to define the thickness of the outline
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

<html>
     <head>
        <style type="text/css">
          p {
          outline-style: dotted;
          outline-color: #000;
          outline-width: 10px;
           }
         </style>
        </head>
        <body>
        <p>Welcom To CSS Tutorial</p>
     </body>
    </html>
Output

Welcom To CSS Tutorial


Share this article on