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.
