Out line: is a line outside the border.
This paragraph has a 3px dotted red border and a black dashed outline with 15px width.
<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 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>
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>
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>
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>