CSS and Outline


css CSS and Outline Outline Offset

Out line

Out line: is a line outside the border.

outline

Outline around paragraph

This paragraph has a 3px dotted red border and a black dashed outline with 15px width.

Outline Properties

-Outline-width -Outline-style -Outline-color -Outline-offset -Outline

Different Outline Style

dashed:- Represent a dashed outline style. solid :- Represent a solid outline style. double :- Represent a double outline style. dotted :- Represent a dotted outline style . groove :- Represent a 3D grooved outline style. ridge:- Represent a 3D ridged outline style. hidden:- Represent a hidden outline style. inset :- Represent a 3D inset outline style. outset:- Represent a 3D outset outline style. none:- No outline style.

Example

<html> <head> <style type="text/css"> p.solid{outline-style:solid;} p.double{outline-style:double;} p.dotted{outline-style:dotted;} p.groove{outline-style:groove;} p.ridge{outline-style:ridge;} p.outset{outline-style:outset;} </style> </head> <body> <p class="solid">outline style can be specified as <b>solid</b> </p> <p class="double">outline style can be specified as <b>double</b> </p> <p class="dotted">outline style can be specified as <b>dotted</b> </p> <p class="groove">outline style can be specified in <b>groove</b> </p> <p class="ridge">outline style can be specified in <b>ridge</b> </p> <p class="outset">outline style can be specified in <b>outset</b> </p> </body> </html>

Outline Width

Outline width can be specified in pixels or one of the standard values thin,medium and thick.

Outline width property can always use with "outline-style" property otherwise it does not work . Example <html> <head> <style type="text/css"> p.thick{outline-width: thick; border-style:solid;} p.thin{outline-width: thin;outline-style:double} p.medium{outline-width: medium;outline-style:ridge;} p.pixel{outline-width:10px; outline-style:outset;} </style> </head> <body> <p class="thick">outline width can be specified as <b>thick</b> </p> <p class="thin">outline width can be specified as <b>thin</b> </p> <p class="medium">outline width can be specified as <b>medium</b> </p> <p class="pixel">outline width can be specified in <b>pixels</b> </p> </body> </html>

Border Color

The outline color property is used to specify the color of outline

Example <html> <head> <style type="text/css"> p{outline-width:10px;outline-color:green; outline-style:double;} </style> </head> <body> <p>outline color can be specified as <b>green</b> </p> </body> </html>

Outline-Offset

Transparent or blank area between the border and outline is known as outline-offset.

Space between the border and outline is due to outline-offset property

Example <html> <head> <style> p { outline-offset: 20px; margin: 20px; background:violet; color:white; border: 1px solid gray; outline: 10px solid red; } </style> </head> <body> <h2> outline-offset </h2> <p> Space between the border and outline is due to <b> outline-offset property</b> </p> </body> </html>

Shorthand property for outline

You can use color,style and width in outline:property within single statement.order of attribute not matter. .

This is shorthand property of outline

Example <html> <head> <style> p { margin: 5px; outline: 10px solid yellow; border: 5px solid #4c4c4c; } </style> </head> <body> <p> You can use color,style and width in<b> outline:property </b> within single statement.order of attribute not matter </p> </body>> </html>
css Outline Offset Chapter Next »