CSS Outline Properties

Note: The outline property is supported in IE8 when a proper DOCTYPE is specified.

What is an Outline?

An outline is a line drawn around an element, outside its border, to make the element stand out.

The outline property specifies the style, color, and width of an element's outline.

CSS Outline Properties0

All CSS Outline Properties

The numbers in the "CSS" column indicate the version of CSS that defines the property (CSS1 or CSS2).

Property	Description	Values	CSS
outline	Sets all the outline properties in one declaration	outline-color, outline-style, outline-width, inherit	2
outline-color	Sets the color of the outline	color-name, hex-number, rgb-number, invert, inherit	2
outline-style	Sets the style of the outline	none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit	2
outline-width	Sets the width of the outline	thin, medium, thick, length, inherit	2

Outline Examples

Drawing a Line Around an Element

This example demonstrates how to use the outline property to draw a line around an element.

<html>
<head>
<style>
p 
{
    border:1px solid red;
    outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>Note:</b> The outline property is supported in IE8 when a proper DOCTYPE is specified.</p>
</body>
</html>

Setting the Outline Style

This example demonstrates how to set the outline style.

<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>

<p class="dotted">Dotted Outline</p>
<p class="dashed">Dashed Outline</p>
<p class="solid">Solid Outline</p>
<p class="double">Double Outline</p>
<p class="groove">Groove Outline</p>
<p class="ridge">Ridge Outline</p>
<p class="inset">Inset Outline</p>
<p class="outset">Outset Outline</p>
<p><b>Note:</b> The outline property is supported in IE8 when a proper DOCTYPE is specified.</p>
</body>
</html>

Setting the Outline Color

This example demonstrates how to set the outline color.

<html>
<head>
<style>
p 
{
    border:1px solid red;
    outline-style:dotted;
    outline-color:#00ff00;
}
</style>
</head>

<body>

<p><b>Note:</b> The outline property is supported in IE8 when a proper DOCTYPE is specified.</p>
</body>
</html>

Setting the Outline Width

This example demonstrates how to set the outline width.

<html>
<head>
<style>
p.one
{
    border:1px solid red;
    outline-style:solid;
    outline-width:thin;
}
p.two
{
    border:1px solid red;
    outline-style:dotted;
    outline-width:3px;
}
</style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

<p><b>Note:</b> The outline property is supported in IE8 when a proper DOCTYPE is specified.</p>
</body>
</html>