Outline Line

This example demonstrates how to draw a line around an element, outside the border edge.

HTML file: Displayed by browser:
<style>
p {
   border: 1px solid red;
   outline: green dotted thick;
}
</style>
<body>
<p>The red line is the border, while the green dotted line is the outline. (I've added a 3px padding to this paragraph but it isn't shown in the html file.)</p>
</body>

The red line is the border, while the green dotted line is the outline. (I've added a 3px padding to this paragraph but it isn't shown in the html file.)

Note: IE8 supports the outline properties only if a !DOCTYPE is specified.

Back button Table of Contents Next button