codescracker


css

CSS Outline



« Previous Tutorial Next Tutorial »


CSS outline is used to draw a line around elements (that is, draw a line outside the borders).

Here is the figure shows the map of outline:

css outline

CSS Draw a Line Around an Element

Let's look at the following example to know how to draw a line around an element, outside the border edge.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Outline Example</title>
	<style>
		p { border: 5px solid green; outline: green dashed thick; padding:5px; }
	</style>
</head>
<body>

<p>There is an outline drawn for this sentence.</p>

</body>
</html>

Here is the output of the above CSS outline example code:

css outline line

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

CSS Set Style of an Outline

Let's look at another example given below to know how to set the style of an outline.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Outline Example</title>
	<style>
		p { border: 4px solid green;padding:4px; }
		p.dotted { outline-style: dotted; }
		p.dashed { outline-style: dashed; }
		p.solid { outline-style: solid; }
		p.double { outline-style: double; }
		p.groove { outline-style: groove; }
		p.ridge { outline-style: ridge; }
		p.inset { outline-style: inset; }
		p.outset { outline-style: outset; }
	</style>
</head>
<body>

<p class="dotted">This is in a dotted outline</p>
<p class="dashed">This is in a dashed outline</p>
<p class="solid">This is in a solid outline</p>
<p class="double">This is in a double outline</p>
<p class="groove">This is in a groove outline</p>
<p class="ridge">This is in a ridge outline</p>
<p class="inset">This is in an inset outline</p>
<p class="outset">This is in an outset outline</p>

</body>
</html>

Below is the sample output of the above CSS outline example code:

css outline style

CSS Set Color of an Outline

Here is another example shows how to set the style and color of an outline.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Outline Example</title>
	<style>
		p { border: 5px solid green; outline-style: dashed;
			outline-color: red; padding:5px; }
	</style>
</head>
<body>

<p>There is a border (5px solid green) and an outline
 (dashed with red colored) drawn outside this paragraph.</p>

</body>
</html>

Following is the sample output of the above CSS outline example code:

css outline styles

CSS Set Width of an Outline

Below is an example shows how to set the width of an outline.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Outline Example</title>
	<style>
		p.one { border: 5px solid green; outline-style: solid;
			outline-width: medium; padding:5px; }
		p.two { border: 5px solid green; outline-style: dashed;
			outline-width: 6px; padding:5px; }
	</style>
</head>
<body>

<p class="one">This is Sentence with class one.</p>
<p class="two">This is Sentence with class two.</p>

</body>
</html>

Below is the sample output of the above CSS outline example code:

css outline width

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test