CSS and Outline

css CSS and Outline Outline Style

Out line

Out line: is a line outside the border.

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 Style Chapter Next »