CSS Outlines

CSS – Outlines:

Outlines are very similar to borders, but there are few major differences as well −
• An outline does not take up space.
• Outlines do not have to be rectangular.
• Outline is always the same on all sides; you cann’t specify different values for different sides of an element.
NOTE − The outline properties are n’t supported by IE 6 or Netscape 7.
You can set the following outline properties using CSS.
• The outline-width property can used to set a width of the outline.
• The outline-style property can used to set the line style for the outline.
• The outline-color property can used to set the color of the outline.
• The outline property can used to set all the above three properties in a single statement.
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 having of zero pixels means no outline.

Example

<html>

<head>

</head>

<body>

<p style=”outline-width:thin; outline-style:solid;”> This text is having a 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>

</body>

</html>

Output

This text is having a thin outline.

 

This text is having thick outline.

 

This text is having 5x outline.

 

Leave a Reply

Your email address will not be published. Required fields are marked *