CSS outline Property | set the outline
11-05-2017    253 times
CSS outline Property

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
Tutorial at home

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;
}

Tutorial at home


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>

Types Od Outlines
Types Od Outlines

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

freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post