CSS

CSS: Outline Properties

An outline is a line drawn around an element - outside the border. This can be use to make an element "stand out".
The CSS outline properties specify the style, color, and width of an outline.
This element has a thin green border and a dotted outline that is 10px wide and red.

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.

Outline Style

The outline-style property specifies the style of the outline.
The outline-style property can have one of the following values:
- dotted - Defines a dotted outline
- dashed - Defines a dashed outline
- solid - Defines a solid outline
- double - Defines a double outline
- groove - Defines a 3D grooved outline. The effect depends on the outline-color value
- ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
- inset - Defines a 3D inset outline. The effect depends on the outline-color value
- outset - Defines a 3D outset outline. The effect depends on the outline-color value
- none - Defines no outline
- hidden - Defines a hidden outline
The following example first sets a thin red border around each <p> element, then it shows the different outline-style values:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid red;}

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>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.

</body>
</html>

Outline Width

The outline-width property specifies the width of the outline.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid red;}

p.one {
    outline-style: solid;
    outline-width: thick;
}

p.two {
    outline-style: dotted;
    outline-width: 5px;
}
</style>
</head>
<body>

<h2>The outline-width Property</h2>

<p class="one">This is some text.</p>
<p class="two">This is some text.</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.

</body>
</html>

Outline Color

The outline-color property is used to set the color of the outline.
The color can be set by:
- name - specify a color name, like "red"
- RGB - specify a RGB value, like "rgb(255,0,0)"
- Hex - specify a hex value, like "#ff0000"
- invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    outline-style: dotted;
    outline-color: lime;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Outline - Shorthand property

To shorten the code, it is also possible to specify all the individual outline properties in one property.
The outline property is a shorthand property for the following individual outline properties:
- outline-width
- outline-style (required)
- outline-color

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    outline: 5px dotted lime;
}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>

</body>
</html>