Copyright © tutorialspoint.com

CSS - Outlines

previous next


Outlines are very similar to the borders but there are few major differences in borders and outlines:

NOTE: The outline properties are not supported by IE 6 or Netscape 7.

You can set following outline properties using CSS.

The outline-width Property:

The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute

A width of zero pixels means no outline.

Here is the example:

<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style="outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>

This will produce following result:

This text is having thin outline.


This text is having thick outline.


This text is having 5x outline.

To Become more comfortable - Do Online Practice

The outline-style Property:

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values:

Here is the example:

<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>

This will produce following result:

This text is having thin solid outline.


This text is having thick dashed outline.


This text is having 5x dotted outline.

To Become more comfortable - Do Online Practice

The outline-color Property:

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

Here is the example:

<p style="outline-width:thin; outline-style:solid;
             outline-color:red">
This text is having thin solid red  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
             outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
             outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>

This will produce following result:

This text is having thin solid red outline.


This text is having thick dashed green outline.


This text is having 5x dotted blue outline.

To Become more comfortable - Do Online Practice

The outline Property:

The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.

Here is the example:

<p style="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style="outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>

This will produce following result:

This text is having thin solid red outline.


This text is having thick dashed green outline.


This text is having 5x dotted blue outline.

To Become more comfortable - Do Online Practice

previous next

Copyright © tutorialspoint.com