The CSS Outline property is a line that is drawn around elements, outside the borders.
The CSS outline property is shorthand of properties:
- outline-style
- outline-width
- outline-color
CSS Syntax:
outline: outline-width outline-style outline-color;Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example {
border: 5px solid yellow;
outline: 5px dotted red;
}
</style>
</head>
<body>
<div class="example">The Outline is outside of any border.</div>
</body>
</html>Output:
The Outline is outside of any border.
Outline styles:
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:blue;
outline-width: 3px;
}
p.solid {outline-style: solid;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
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;}
</style>
</head>
<body>
<p class="solid">A solid outline</p>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed 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>
</body>
</html>Output:
A solid outline
A dotted outline
A dashed outline
A double outline
A groove outline.
A ridge outline.
An inset outline.
An outset outline.
Note: The CSS Outline property is different property than the CSS border! The Outline is drawn outside of the element’s border.
Enjoy coding!
CSS backface-visibility Property