CSS Outline

There are properties in CSS by which you can set otline of an element. An otline is a line that is drawn around the element, outside the border boundary. There is one drawback however. These properties do not work in Internet Explorer. We will discuss these properties here.

Set outline property

You can set the properties of the outline like the color, style and width by using the outline property. Example:

<html>
<head>
<style type="text/css">
p 
{
border: green solid thin;
outline: red dotted thick
}
</style>
</head>

<body>
<p>This paragraph has green border and red outline.</p>
</body>
</html>

Output:

This paragraph has green border and red outline.

Set the outline properties by using different commands

You can set the properties of the outline by using the various commands also. They are discussed below:
outline-style The style of the outline can be set by using the outline-style property. The various styles of outlines that can be used are given in Styles of the border section.
outline-color The color of the outline can be set by using the outline-color property. The color can be specified by color name, rgb number or hexadecimal number.
outline-width The width of the outline can be set by using the outline-width property. The ways to define the width of the outline are specified in Width of the border section.
The above example can also be represented by using the three commands given above. Let's see how..!!
Example:

<html>
<head>
<style type="text/css">
p.out
{
border: green solid thin;
outline-style: dotted;
outline-color: red;
outline-width: thick
}
</style>
</head>

<body>
<p class="out">This paragraph has green border and red outline.</p>
</body>
</html>

Output:

This paragraph has green border and red outline.

CSS Tutorial

CSS Outline

Set outline property

Set the outline properties by using different commands

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'