CSS Outline property

We can specify an outline of the border of a HTML elements.

Note: The width and height of any elements is not a part of it dimension.

We can change the outline style of a section of HTML use the border-style property. outline-style property has the following values

• dotted: dotted border
• dashed: dashed border
• solid: solid border
• double: double border
• groove: 3D grooved border
• ridge: 3D ridge border
• inset: 3D inset border
• outset: 3D outset border
• none: no border
• hidden: hidden border

outline is often used for accessibility reasons that is to emphasize a link when tabbed to without affecting positioning and in a different way than hover.

Example 1

CSS Code

div
{
border-style:solid;
border-color:red;
outline-color:green;
outline-width:5px;
margin:25px;
}
.dotted
{
outline-style:dotted;
}
.dashed
{
outline-style:dashed;
}
.solid
{
outline-style:solid;
}
.double
{
outline-style:double;
}
.groove
{
outline-style:groove;
}
.ridge
{
outline-style:ridge;
}
.inset
{
outline-style:inset;
}
.outset
{
outline-style:outset;
}
.none
{
outline:none;
}

.hidden
{
outline:hidden;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Border Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dotted">Dotted</div>
<div class="dashed">Dashed</div>
<div class="solid">Solid</div>
<div class="double">Double</div>
<div class="groove">Groove</div>
<div class="ridge">Ridge</div>
<div class="inset">Inset</div>
<div class="outset">Outset</div>
<div class="none">None</div>
<div class="hidden">Hidden</div>
</body>
</html>

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