CSS Outline
An outline is a line drawn around an element, outside its border, to make the element stand out.
CSS has these outline properties:
outline-style— sets the style of the outline.outline-color— sets the color of the outline.outline-width— sets the width of the outline.outline-offset— adds space between the outline and the edge or border of the element.outline— a shorthand property for the others.
Note: An outline differs from a border. The outline is drawn outside the element's border and may overlap other content. Also, the outline is not part of the element's size, so the element's total width and height are not affected by the outline.
The outline-style Property
The outline-style property sets the style of the outline. It can take one of these values: dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden.
Example
Each paragraph shows a different outline style.
Prompt
An HTML page that demonstrates the different outline-style values.
In an internal
<style> block, make paragraph classes for each outline style: dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden. Give the paragraphs some padding so the outlines are visible. Add a labeled paragraph for each.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
padding: 5px;
outline-color: green;
}
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;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}
</style>
</head>
<body>
<p class="dotted">A dotted outline.</p>
<p class="dashed">A dashed outline.</p>
<p class="solid">A solid outline.</p>
<p class="double">A double outline.</p>
<p class="groove">A groove outline.</p>
<p class="ridge">A ridge outline.</p>
<p class="inset">An inset outline.</p>
<p class="outset">An outset outline.</p>
<p class="none">No outline.</p>
<p class="hidden">A hidden outline.</p>
</body>
</html>
All CSS Outline Properties
A summary of the outline properties:
outline— sets all the outline properties in one declaration.outline-color— sets the color of an outline.outline-offset— sets space between an outline and the edge or border of an element.outline-style— sets the style of an outline.outline-width— sets the width of an outline.