Categories
Web development

CSS Outline

The CSS Outline property is a line that is drawn around elements, outside the borders.

CSS Outline Property

The CSS outline property is shorthand of properties:

  1. outline-style
  2. outline-width
  3. 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

CSS Clip-path Property

CSS flex-basis Property