CSS outline properties

With CSS outline properties, you can specify how lines appear around elements outside of a outlines edge.

NOTE: Outline properties do not work in Internet Explorer.

This lesson focuses on:

Setting the style of an outline
Setting the width of an outline
Setting the color of an outline

Setting the style of an outline

The style of an outline is set with the outline-style property.

Possible values for the outline-style property:

dotted
solid
groove
double
outset

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {outline-style: dashed;}
h2 {outline-style: double;}
p {outline-style: dotted;}
a {outline-style: groove;}
-->
</style>
</head>
<body>
<h1>This text has a dashed outline</h1>
<br />
<h2>This text has a double outline</h2>
<br />
<p>
This text has a dotted outline
</p>
<br />
<a href="http://www.landofcode.com">
This text has a groove outline
</a>
</body>
</html>

Output:

This text has a dashed outline

This text has a double outline

This text has a dotted outline

This text has a groove outline

In the above example, text declared with the <h1> heading tag is set to have a dashed outline. Text declared with the <h2> heading tag is set to have a double outline. Text declared with the <p> tag is set to have a dotted outline. Links are set to have a groove outline.

Setting the width of an outline

The width of an outline is set with the outline-width property. The values you can assign to this attribute include "thin", "medium", "thick", or a custom value.

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {outline-style: dashed; outline-width: thin;}
h2 {outline-style: double; outline-width: medium;}
p {outline-style: dotted; outline-width: thick;}
a {outline-style: groove; outline-width: 10px;}
-->
</style>
</head>
<body>
<h1>This text has a dashed outline</h1>
<br />
<h2>This text has a double outline</h2>
<br />
<p>
This text has a dotted outline
</p>
<br />
<a href="http://www.landofcode.com">
This text has a groove outline 
that has a thickness of 10 pixels
</a>
</body>
</html>

Output:

This text has a thin dashed outline

This text has a medium double outline

This text has a thick dotted outline

This text has a groove outline that has a thickness of 10 pixels

In the above example, text declared with the <h1> heading tag is set to have a thin and dashed outline. Text declared with the <h2> heading tag is set to have a medium and double outline. Text declared with the <p> tag is set to have a thick and dotted outline. Links are set to have a groove outline that has a thickness of 10 pixels.

Setting the color of an outline

The color of an outline is set with the outline-color property. The values you can assign to this attribute include a color name, a hex value, an RGB value, or the word "invert" for an inverted color relative to the background color.

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {outline-style: dashed; outline-color: green;}
h2 {outline-style: double; outline-color: #556B2F;}
p {outline-style: dotted; outline-width: rgb(128, 128, 128);}
a {outline-style: groove; outline-color: invert;}
-->
</style>
</head>
<body>
<h1>This text has a green dashed outline</h1>
<br />
<h2>This text has a darkolivegreen double outline</h2>
<br />
<p>
This text has a gray dotted outline
</p>
<br />
<a href="http://www.landofcode.com">
This text has an inverted groove outline
</a>
</body>
</html>

Output:

This text has a green dashed outline

This text has a darkolivegreen double outline

This text has a gray dotted outline

This text has a transparent groove outline

In the above example, text declared with the <h1> heading tag is set to have a green and dashed outline. Text declared with the <h2> heading tag is set to have a darkolivegreen and double outline. Text declared with the <p> tag is set to have a gray and dotted outline. Links are set to have a groove outline with inverted color.